一:代碼與注意事項
主要兼容的微信小程序
流程網上一抓一大把(依賴引入,解決一個報錯的坑。。。網上一搜一大堆)
直接上代碼
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
});
},
簡單粗暴的方式結局了,不是很優雅但是很有效。