星云erp-手机版-echart兼容小程序方案

本文基于移动版 配套 星云erp-手机版

众多拿到源码的同学反映以下问题

问题 

首页的曲线图标 在H5下可用，但发布为微信小程序后空白

解决方法：

步骤一：复现问题

原来是 小程序下通过 $refs获取不了 canvas 组件对象。

（经查阅资料后发现 小程序下 ref方式获取组件对象需要自定义组件，如果是uniapp内置组件会出现 这种情况）

到这里问题点已经定位好了，解决的思路也是出来了

步骤二：自定义echart 显示组件

如果自己自定义组件很麻烦，经过扫网最好锁定了 lime-echart: 百度图表 echarts，uniapp、taro 使用 echarts 图表，全面兼容各平台小程序、H5、APP、Nvue (gitee.com)

于是决定拿现成的。

把以上两个文件夹下载下来，放到 移动版 对应目录中

步骤三、引用组件，渲染数据

  1、 把echart引入项目中

import * as echarts from "@/static/echarts.min.js"

 2、把组定义组件引入首页中

	import LEchart from '@/components/l-echart/l-echart.vue';

<LEchart style="position: relative;" ref="chartLine"  @finished="loadData"></LEchart>

3、实现loadData方法，获取数据和渲染曲线图

	loadData() {
				orderChart()
					.then((res) => {
						this.formData = res.data;
						this.initChart();
					});
			},



			async initChart() {

				// 获取 canvas 元素对于 H5 环境的写法
				// const chartDom = document.getElementById('echartContainer');
				// 初始化 ECharts 实例
				//this.chartInstance = echarts.init(chartDom);

				 const chart = await this.$refs.chartLine.init(echarts);

				// 设置图表配置项
				const option = {
					title: {
						text: '',
					},
					tooltip: {},
					legend: {
						data: [],
					},
					xAxis: {
						data: [],
					},
					yAxis: {},
					series: [],
				};

				if (this.formData) {
					option.legend.data.push("今天订单");
					option.legend.data.push("今日退单");
					option.legend.data.push("本月订单");
					option.legend.data.push("本月退单");

					this.initSeriesData(this.formData.today.order.charts, "今天订单", option);
					this.initSeriesData(this.formData.today.returned.charts, "今日退单", option);
					this.initSeriesData(this.formData.sameMonth.order.charts, "本月订单", option);
					this.initSeriesData(this.formData.sameMonth.returned.charts, "本月退单", option);
				}

				chart.setOption(option);


			},

			initSeriesData(charts, name, option) {

				let seriedata = [];
				let xAxisData = [];
				let seriesdataUnitData = {
					name: name,
					type: 'line'
				};
				for (let item of charts) {
					seriedata.push(item.totalAmount)
					xAxisData.push(item.createDate);
				}
				this.$set(option.xAxis, "data", xAxisData);
				this.$set(seriesdataUnitData, "data", seriedata);
				option.series.push(seriesdataUnitData);
			},

			beforeDestroy() {
				// 销毁图表实例以避免内存泄漏
				if (this.chartInstance) {
					this.chartInstance.dispose();
					this.chartInstance = null;
				}
			},

4、重新运行到小程序（恭喜问题解决了）