微信小程序中使用ECharts并动态赋值_微信原生小程序导入eacher图表动态赋值写法

下载echarts的微信小程序版本：echarts-for-weixin ，已经有大神做好了，地址在：https://github.com/ecomfe/echarts-for-weixin，下载后解压，只需要其中的ec-canvas文件夹。将其复制到微信小程序的根目录（本文做法，复制到其他目录也可以，只是需要修改相应的调用路径）。项目的结构如下：

GitHub中的pages文件夹下有ECharts各个示例的配置代码  自取按照格式复制到项目的JS代码里就行，这里不过多细讲

 这里主要讲一下如何动态配置ECharts的option数据，我这里配置的是一个饼图

WXML:

<view class="container">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

 JSON:

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

JS:

import * as echarts from '../../ec-canvas/echarts';//引入组件库
 
let rowRows = [];//定义options中的data数据
 
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
 
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: rowRows
    }]
  };
 
  chart.setOption(option);
  return chart;
}
 
Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
 
  onLoad(options) {
    var that = this ;
    UTIL.httpRequest(API.URL_GET_GETSUMSTATISTICS, sendData,{//这里是封装的请求方法，使用你自己的请求即可
      success: (res) => {//请求成功返回res
 
        //循环List开始
        for (let j = 0; j < res.length; j++) {
 
          const element = res[j];
 
          rowRows.push({//向rowRows中按格式push接口返回值内容
            value: element.value,
            name: element.name
          })
 
          that.setData({ //重新setData渲染canvas
            ec: {
              onInit: initChart
            }
          })
 
        }
        //循环List结束
      }
    })
  }
});

需要注意组件ec-canvas的父容器必须有宽高，否则画布渲染不上，另外JSON文件也要记得配置

效果图如下：