一：代碼與注意事項

主要兼容的微信小程序

流程網上一抓一大把（依賴引入，解決一個報錯的坑。。。網上一搜一大堆）

直接上代碼

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

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

總結

以上是生活随笔為你收集整理的uni-app echart 使用mpvueEcharts踩坑与流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。