微信小程序中使用动态echarts

微信小程序中使用动态echarts，套值可用

1、先在微信开发者工具中创建一个项目

2、 在echarts-for-weixin中下载项目

• 解压后打开，把ec-canvas文件夹复制到项目pages同目录下
  
  
• 如有必要，将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js
  进入官网echarts点击下载

然后根据自己的需求选择需要的图表、坐标系、组件进行打包下载，生成并替换 echarts.js

4、在页面中使用echarts

• 在json中

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

• 在wxml中

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

• 在wxss中

.my-chart {
  width: 90%;
  height: 500rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

• 在js中

import * as echarts from '../../ec-canvas/echarts';


function pieChart(chart,valueList) {
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '3%',
      left: 'center'
    },

    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        
        labelLine: {
          show: false
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return (params.percent - 0).toFixed(0) + '%'
              }
            },
            labelLine: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: true,
              formatter: "{b}\n{d}%"
            }
          },
        },
        data: valueList
      }
    ]
  };
    chart.setOption(option);
  }


Page({
  data: {
    ec: {
      lazyLoad: true
    },

    valueList:[
      {value: 111, name: '十岁'},
      {value: 231, name: '八岁'},
      {value: 263, name: '六岁'},
      {value: 234, name: '四岁'}
    ]
  },

  onLoad: function (options) {
    this.initChart(this.data.valueList);
  },

 
  initChart: function (valueList) {
    this.selectComponent('#mychart-dom-pie').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      pieChart(chart,valueList)
      this.chart = chart;
      canvas.setChart(chart);
      return chart;
    })
  },

})

效果图

通过改变valueList的值套值