vue-echarts踩坑記錄

摘要： 最近手頭一個專案需要做兩個圖，一個是折線圖，一個餅圖。由於是基於Vue的專案，第一時間就想到用vue-echarts來實現。vue-echarts本質上也是使用了echarts.js,只是包裝成vue元件。 1、安裝vue-echarts包 npm install vue-echart...

最近手頭一個專案需要做兩個圖，一個是折線圖，一個餅圖。由於是基於Vue的專案，第一時間就想到用vue-echarts來實現。vue-echarts本質上也是使用了echarts.js,只是包裝成vue元件。

1、安裝vue-echarts包

npm install vue-echarts

2、引用vue-echarts

template:

<echarts :options="trendChart" ref="trendEchart"></echarts>

3、折線圖

js:

import ECharts from "vue-echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";

export default {
trendChart: {
grid: {
left: '10%',
top: 52,
},
tooltip: {
trigger: 'axis',
showContent: true,
position:function(p){
return [p[0] + 10000000000, 0]; //不需要顯示彈層資訊
},
formatter: (parmes)=>{//選擇折線圖上的座標可以獲得相關值
let value1 = parmes[0];
let value2 = parmes[1];
//拿到值後,需要在哪顯示可以在這操作

}
},
textStyle: {
color: "#999",
},
label:{
fontSize: 44,
},
xAxis: {
type: 'category', //類目的行式，原樣展示
boundaryGap: false, //兩邊留白策略
offset: 3, 
axisLine:{
show:false, //x座標軸線是否顯示，預設顯示
},
axisTick:{
show: false,
},
axisLabel: {
interval: 10000,//預設1,表示【隔一個標籤顯示一個標籤】
showMinLabel: true, //x軸只需要展示最小的和最大的值
showMaxLabel: true,
fontSize: 20,
},
data: [], 
},
yAxis: {
type: 'value',
boundaryGap: false,
axisLine:{
show:false,
},
axisLabel:{
fontSize: 22,
},
axisTick:{
show: false,
},
},
series: [{
name: '本組合',
type: 'line',
smooth: true,
color: '#e2b256',
data: []
},{
name: '上證指數',
type: 'line',
smooth: true,
color: '#5eb8e2',
data: []
}]
},
}
components: {
echarts: ECharts,
}

4、折線圖效果