小程序引入echarts并接通数据

一般第一步是引入ec-canvas到component里面：（点击ec-canvas便可去往下载）

然后再使用echarts的页面里引入：

在js页面里

import * as echarts from "../../component/ec-canvas/echarts";

通过上面这段代码引入到js当中并init：

function healthChart(
	canvas: { setChart: (arg0: any) => void },
	width: any,
	height: any,
	xAxisData: any,
	seriesData: any,
) {
	const chart = echarts.init(canvas, null, {
		width: width,
		height: height
	});
	canvas.setChart(chart);

	let option = {
		xAxis: {
			type: 'category',
			data: xAxisData,
			axisLine: {
				lineStyle: {
					color: '#50E3C2',
				}
			},
			nameTextStyle: {
				fontSize: 24,
				fontFamily: 'PingFangSC-Regular,PingFang SC',
				color: '#50E3C2'
			},
			axisLabel: {
				interval: 0,
			},
			axisTick: {
				alignWithLabel: true,
			}
		},
		yAxis: {
			type: 'value',
			show: false,
		},
		series: [{
			data: seriesData,
			type: 'line',
			lineStyle: {
				color: '#50E3C2',
				width: 1
			},
			symbol: 'circle',
			symbolSize: 1,
			label: {
				show: true,
				fontFamily: 'PingFangSC-Regular,PingFang SC',
				color: '#fff',
			},

			itemStyle: {
				color: '#50E3C2',
			}
		}],
	};
	chart.setOption(option);
	return chart;
}

一般情况我习惯把echarts放到Page外面，然后在data里init：

然后就可以调用啦！但是这只是调用而已，并没有接入数据，下面便是接入数据的流程：
在请求的回调里面执行下图：

放在setData之后是因为异步的原因，直接调用Page外面的health function并传入对应的数据；
这个过程也许有人会遇到this.selectComponent(’#myChart’) is not function或者console.log(this.selectComponent(’#myChart’)) 输出的是null，这时需要你去检查json或者js是否正确的引入ec-canvas！

如果文章对您有帮助，请动动您的小手 点个赞呗！！！