【微信小程序】关于使用ECharts制作图表

halo小伙伴们，在原生微信小程序中会遇到需要开发图表，这总不能自己手撸一个吧？多费力啊，这就不得不说ECharts的好用之处了。接下来我来说下微信小程序使用ECharts的一个过程吧

ECharts官网查看自己想要的图表，后面复制配置项即可。
ECharts有一个专门的echarts-for-weixin的git项目地址（如果该地址打不开也可以尝试使用小编的码云地址），我们只需要将项目下载下来，将如图中的ec-canvas文件夹整个文件夹复制到我们的项目中即可

复制到我们自己的项目里面

这里小编主要是编写storeStatisticsNew文件夹里面的文件
第一步
在json文件中引入ec-canvas/ec-canvas

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

第二步
wxml文件中

<view catchtouchmove="return" style="height:520rpx;padding:0 10rpx 0rpx 10rpx;position:relative;">
	<ec-canvas  style="width: 100%; height: 400px;" id="mychart-dom-pie" force-use-old-canvas="true"  canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

第三步
在js文件中引入ec-canvas/echarts

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

第四步
在请求后，渲染数据，其中options 里的配置项可以根据我们自己的选择来配置echarts

// data中
data:{
    ecComponent:{}, // 表格实例
    ec: {
      lazyLoad: true, // 延迟加载
    },
}

// 请求到数据后进行渲染
if(res.data.code == 'ok'){
	this.ecComponent = this.selectComponent('#mychart-dom-pie'); //获取组件
	this.ecComponent.init((canvas, width, height, dpr) => {       //初始化
		// 初始化图表
	    this.echart = echarts.init(canvas, null, {  //初始化图表
	      width: width,
	      height: height,
	      devicePixelRatio: dpr // new
	    });
	    this.options = {
			grid: {
			  left: '3%', // 与容器左侧的距离
			  right: '2%', // 与容器右侧的距离
			  borderWidth: 10,
			  containLabel: true,
			},
	        xAxis: {
	          type: 'category',
	          data: xData
	        },
	        yAxis: {
	          type: 'value',
	          min:0, // 配置 Y 轴刻度最小值
	          // max:res.data.data.maxAmount,  // 配置 Y 轴刻度最大值
	          splitNumber:4,  // 配置 Y 轴数值间隔
	          // axisLabel:{
	          //   formatter: '{value} 元'
	          // }
	        },
	        series: [
	          {
	            data: yData,
	            type: 'line',
	            label:{
	              show:true,
	              formatter: (params) => {
	                return (params.value) + '元' // 传入params和定义的单位数组
	              }
	            }
	          }
	        ]
      	};
		this.echart.setOption(this.options, true); //赋值渲染
		// 注意这里一定要返回 chart 实例，否则会影响事件处理等
		return this.echart;
    });
}

好啦，快去试试看可不可行吧，如果有更好的方法的小伙伴们记得跟小编分享一下你们的开发经验哦！