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
	});
},

簡單粗暴的方式結局了,不是很優雅但是很有效。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章