Angbike个人博客 > WeChat > 微信小程序中使用Echarts实现一图或多图展示

微信小程序中使用Echarts实现一图或多图展示

1、下载echarts微信版,地址:https://github.com/ecomfe/echarts-for-weixin
2、将下载好的文件ec-canvas目录放在小程序项目根目录中即可
3、在页面使用echarts的话,需要在index.json中添加以下配置(以下为整个json配置):

{
  "navigationBarTitleText": "echarts",
  "disableSwipeBack": true,
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

4、页面js中需要引入echarts,即const echarts = require('../../ec-canvas/echarts.js');
5、通过github下载的echarts包含类型比较多,上传代码进行发布时,提示echarts文件过大,可以忽略。

wxml代码:

<view class="container">

  <view class="chronic-data-chart">
    <text class="data-chart-title">图一</text>
    <view class="data-chart-panel">
      <ec-canvas ec="{{fastingBloodSugarEcharts}}"></ec-canvas>
    </view>
  </view>

  <view class="chronic-data-chart">
    <text class="data-chart-title">图二</text>
    <view class="data-chart-panel">
      <ec-canvas ec="{{afterMealBloodSugarEcharts}}"></ec-canvas>
    </view>
  </view>

</view>

wxss代码:

.chronic-data-chart{
  background-color: rgba(255, 255, 255, 1);
  margin: 20rpx 0rpx 10rpx 0rpx;
  padding: 20rpx;
}

.data-chart-title{
  font-weight: bold;
  padding: 0rpx 0rpx 20rpx 0rpx;
  display: block;
}

.data-chart-panel{
  width: 100%;
  height: 450rpx;
}

js代码:

const App = getApp();
const echarts = require('../../ec-canvas/echarts.js'); 
let fbsEcharts, ambsEcharts = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    // 图一
    fastingBloodSugarEcharts: {
      onInit: function (canvas, width, height) {
        fbsEcharts = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(fbsEcharts);
        return fbsEcharts;
      }
    },
    // 图二
    afterMealBloodSugarEcharts: {
      onInit: function (canvas, width, height) {
        ambsEcharts = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(ambsEcharts);
        return ambsEcharts;
      }
    }
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    setTimeout(() => {
      that.echartsData();
    }, 3000);
  },

  /**
   * 图标初始化
   */
  echartsData: function(){
    let that = this;
      let xData1 = [1, 2, 3, 4, 5, 6, 7];
      let yData1 = [2.2, 3.5, 5.1, 4.2, 3.5, 5, 4.8];
      let yData2 = [2.5, 5.1, 3.5, 3.5, 4.2, 4.8, 5];
    that.getSugarOption(fbsEcharts, xData1, yData1, 3.5);
      that.getSugarOption(ambsEcharts, xData1, yData2, 3.5);
  },
  
  /**
   * echarts图表
   */
  getSugarOption: function (echarts, xData, yData, standardData) {
    echarts.setOption({
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#009ee7',
        position: function (pos, params, dom, rect, size) {
          var obj = { top: 60 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
          return obj;
        },
        formatter: '{c}mmol/L' + '\n' + '{b}'
      },
      grid: {
        top: '20',
        bottom: '20',
        left: '10',
        right: '30'
      },
      xAxis: {
        type: 'category',
        show: false,
        boundaryGap: false,
        data: xData
      },
      yAxis: {
        type: 'value',
        position: 'right',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLabel: {
          fontSize: '14',
          color: '#9e9e9e',
          rich: {}
        }
      },
      series: [
        {
          type: 'line',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#63c3f5'
          },
          itemStyle: {
            color: '#019de8'
          },
          data: yData
        }
      ]
    });
  },

})

效果截图:
微信小程序中使用Echarts实现一图或多图展示.jpg

博客评论已关闭