微信小程序使用ec-canvas，并且动态请求数据

1.下载ec-canvas,小程序专用ecahrts库，加入到components目录中。

2.页面中使用

 //wxml页面引入组件
 	<ec-canvas style="width: 100%;height: 100%;" force-use-old-canvas="true" id="srwcqk" canvas-id="srwcqk" ec="{{ ec }}"></ec-canvas>

//json文件中引入组件
	{
          "usingComponents": {
                  "ec-canvas": "../../components/ec-canvas/ec-canvas",
          },
          "navigationBarTitleText": "关键指标数据平台"
      }

//js页面中引入并配置option函数
import * as echarts from '../../components/ec-canvas/echarts';
//配置option函数，这里是一个饼图为例
function setSrwcqkOption(chart, series) {
	const option = {
		tooltip: {
			trigger: "item",
			triggerOn:'mousemove',
			confine:true,
			formatter: "{b} : {c}",
		},
		legend: {
			type: 'scroll',
			right: "3%",
			icon: 'rect',
			// itemWidth: 12,  // 设置图例标记的图形宽度
			// itemHeight: 8, // 设置图例标记的图形高度
			bottom: "10",
			// itemGap:15,
			// orient:'oritental',
			pageButtonGap: 15,
			// pageIconSize: 8,
			textStyle:{
				color:'rgba(51,51,51,0.8)',
			},
		},
		backgroundColor: "#ffffff",
		series: [{
			label: {
				formatter: function (params) {
					return  `${params.data.name}：${params.value}`
				},
				// labelLine: {
				// 	lineStyle: {
				// 		color: ' #333333'
				// 	},
				// 	smooth: 0.2,
				// 	length: 10,
				// 	length2: 30
				// },
			},
			type: 'pie',
			center: ['50%', '40%'],
			radius: ['40%', '55%'],
			data: series
		}]
	};
	chart.setOption(option);
}
Page({
    data:{
         ec:{
             lazyload: true，//设置为懒加载，接口请求数据后渲染
         },
         chartData:{}
    },
    onReady() {
        //获取组件的dom对象
        this.srwcqkComponent = this.selectComponent('#srwcqk');
    }

})

3.接口请求，动态渲染

    getData() {
        this.srwcqkComponent.init((canvas, width, height, dpr) => {
            // 初始化图表
            const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
            });
            // 将后台的值传递给 setSrwcqkOption 方法
            //这里chartData是你后台请求的数据
            setSrwcqkOption(chart, this.data.chartData);
            return chart;
    });

4渲染完成后的，一个饼图就出现了