uni-app echart 使用mpvueEcharts踩坑与流程

一：代码与注意事项

主要兼容的微信小程序

流程网上一抓一大把（依赖引入，解决一个报错的坑。。。网上一搜一大堆）

直接上代码

html

<view class="echart-container">
 <mpvue-echarts canvasId="chatSettled" ref="pieChart1" :echarts="echarts" @onInit="init10Chart" />
</view>

<view class="echart-container">
 <mpvue-echarts canvasId="chatOrder" ref="pieChart2" :echarts="echarts" @onInit="init20Chart" />
</view>

注意⚠️：如果有两个echart图一定要把参数写成不一样的，比如canvasId等

 

css

注意⚠️：一定要给包裹他的父元素设置高度

.echart-container {
  height: 40vh;
}

js

import * as echarts from '../echarts.min.js' /*chart.min.js为在线定制*/
import mpvueEcharts from '../mpvue-echarts/src/echarts.vue'

重点

export default {
		components: {
			mpvueEcharts
		},
		data() {
			return {
				echarts,
				colors: ['#335AC5', '#EB6059'],
				option10: {},
				option20: {},
			}
		},
		methods: {
			async init10Chart(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				this.chart10 = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(this.chart10);
				let data = await this.getSuccessOrderChart(); // 获取数据
				this.option10 = {
					tooltip: {
						/* trigger 和 axisPointer 滑过提示框，如果注释掉 只显示 series里的文案*/
						trigger: 'none',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						x: "12%", //x 偏移量
						y: "20%", // y 偏移量
						width: "80%", // 宽度
						height: "60%", // 高度
					},
					xAxis: {
						type: 'category',
						axisTick: { // 加上以后x轴的数据和小尖尖正好对齐
							alignWithLabel: true,
							show: false
						},
						axisLine: {
							show: false
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: '#AEB5C3'
							}
						},
						axisLabel: {
							show: true,
							// interval:6,
							textStyle: {
								color: '#999'
							},
						},
						axisPointer: {
							label: {
								formatter: function(params) {
									return params.value + '\n\n' + '成交运单数' +
										(params.seriesData.length ? ' : ' + params.seriesData[0].data + '单' : '');
								},
								// padding: [15, 20],
								backgroundColor: '#AEB5C3', //文本框的背景
								textStyle: { // 文本框的颜色和字体
									color: '#fff',
									fontStyle: 'italic',
								},
								margin: -13 //label 距离轴的距离。
							},
						},
						data: data[0]
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						},
						axisTick: { // 加上以后x轴的数据和小尖尖正好对齐
							alignWithLabel: true,
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#999'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999'
							}
						},
						axisPointer: {
							label: {
								// backgroundColor:'#666',
							},
						},
					},
					series: [{
						type: 'line',
						data: data[1],
						name: '结算金额',
						smooth: true,
						symbol: 'none',
						/* 
						 'average' 取过滤点的平均值
						 'max' 取过滤点的最大值
						 'min' 取过滤点的最小值
						 'sum' 取过滤点的和
						 */
						sampling: 'average',
						lineStyle: {
							color: this.colors[0],
							width: 3
						},

					}]
				};
				this.chart10.setOption(this.option10)
				this.$refs.pieChart1.setChart(this.chart10);
			},
			// 结算金额
			async init20Chart(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				this.chart20 = echarts.init(canvas, null, {
					width: width,
					height: height
				})

				canvas.setChart(this.chart20);
				let data = await this.getFulSettledChart();
				this.option20 = {
					tooltip: {
						/* trigger 和 axisPointer 滑过提示框，如果注释掉 只显示 series里的文案*/
						trigger: 'none',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						x: "10%", //x 偏移量
						y: "20%", // y 偏移量
						width: "80%", // 宽度
						height: "60%" // 高度
					},
					xAxis: {
						type: 'category',
						axisTick: { // 加上以后x轴的数据和小尖尖正好对齐
							alignWithLabel: true,
							show: false
						},
						axisLine: {
							show: false
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: '#AEB5C3'
							}
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#999'
							}
						},
						axisPointer: {
							label: {
								formatter: function(params) {
									return params.value + '\n\n' + '结算金额数' +
										(params.seriesData.length ? ' : ' + params.seriesData[0].data + '元' : '');
								},
								padding: [15, 20],
								backgroundColor: '#AEB5C3', //文本框的背景
								textStyle: { // 文本框的颜色和字体
									color: '#fff',
									fontStyle: 'italic',
								},
								margin: -13 //label 距离轴的距离。
							},
						},
						data: data[0]
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false
						},
						axisTick: { // 加上以后x轴的数据和小尖尖正好对齐
							alignWithLabel: true,
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#999'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#999'
							}
						},
						axisPointer: {
							label: {
								// backgroundColor:'#666',
							},
						},
					},
					series: [{
						type: 'line',
						data: data[1],
						name: '结算金额',
						smooth: true,
						symbol: 'none',
						/* 
						 'average' 取过滤点的平均值
						 'max' 取过滤点的最大值
						 'min' 取过滤点的最小值
						 'sum' 取过滤点的和
						 */
						sampling: 'average',
						lineStyle: {
							color: this.colors[1],
							width: 3
						},

					}]
				};
				this.chart20.setOption(this.option20)
				this.$refs.pieChart2.setChart(this.chart20);
			},
		}
	}

注意⚠️：因为是适配小程序，所以一定要考虑代码量，chart.js使用在在线定制，在线定制地址：https://echarts.apache.org/zh/builder.html

 

二：踩坑

 

重点来了，踩坑，就是我做的效果就是手指在echart图上滑动，就会有提示框出现

但是在滑动出折线图的时候整个图都会消失不见，不只是折线图，连同座标轴一起消失不见，如下图

因为用的是封装好的组件

首先确定是滑动这个事件的问题，但是我不能暴力的去掉滑动事件，于是我就计算滑动的边缘界限

比如当top到达哪个位置直接return出去就不能给滑动事件

 

首先计算出这个echart的宽高，

进入组件mpvue-echarts/src/echarts.vue

在init()事件中获取宽高

init() {
 ...
	this.$emit('onInit', {
		canvas: this.canvas,
		width: res.width,
		height: res.height
	});
     //在这里获取
	this.width = res.width;
	this.height = res.height
 ...
},

然后进入touchMove()事件中

touchMove(e) {
	const {
		disableTouch,
		throttleTouch,
		chart,
		lastMoveTime
	} = this;
	if (disableTouch || !chart || !e.mp.touches.length) return;
	if (throttleTouch) {
		const currMoveTime = Date.now();
		if (currMoveTime - lastMoveTime < 240) return;
		this.lastMoveTime = currMoveTime;
	}
	const touch = e.mp.touches[0];
    // 重点在这里...
    // 这里计算的是向右的偏移
	let xRight = this.width - ((this.width)*0.1); 
    // 这里计算的是向左的偏移
	let xLeft =(this.width)*0.1 + 5.8;
    // 这里计算的是向上的偏移
	let yTop = this.height - ((this.height)*0.2)
    // 这里计算的是向下的偏移
	let ybottom = (this.height)*0.2;

	if(touch.x > xRight || touch.x < xLeft || touch.y> yTop|| touch.y< ybottom){
		return
	}
    //重点完...
	chart._zr.handler.dispatch('mousemove', {
		zrX: touch.x,
		zrY: touch.y
	});
},

简单粗暴的方式结局了，不是很优雅但是很有效。