1.首先在項目裏面main.js全局引入echarts，或者在index.html裏面自定義引入外部的echarts定製包文件，可以根據自己項目需求定製打包文件。
import echarts from 'echarts' //我這邊是在項目圖表組件中引入（貼餅圖演示文件），如圖
2.對數據進行處理之後
2.條形統計圖
引入之後數據處理根據自己組件傳過來的值進行操作，處理完成之後，進行圖標操作
我這裏顯示了平均線，代碼裏面有註釋
initChart() {
// 基於準備好的dom，初始化echarts實例
this.chart = echarts.init(this.$el)
this.chart.setOption({
title: {
text: '人均發帖'+this.myavPost+"回帖"+this.myavRep, //這個的顯示我是特定顯示，表示的是圖表的標題文字
x: 'center'
},
symbol: 'triangle',
symbolSize: 8,
// color: ['#3398DB'],
// color: function(params) {
// var colorList = [
// '#C1232B', '#3398DB', '#FCCE10', '#E87C25', '#27727B',
// '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
// '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
// ];
// return colorList[params.dataIndex]
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器，座標軸觸發有效
type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
},
},
legend: {
orient: 'vertical',
left: 'right',
// data: this.barname
data: ['發帖', '回帖']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: this.barname,
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '發帖',
type: 'bar',
markLine: {
data: [{
name: '平均線',
// 支持 'average', 'min', 'max'
type: 'average',
}, ],
// 標籤的樣式在這裏設置
lineStyle: {
color: 'red',
width: 2,
// type: "solid",
},
label: {
normal: {
position: 'middle',
show: true,
formatter: '{b} : {c}' // 平均線的文字描述 b名稱 c值
}
},
// formatter: '{b}: {d}'
},
data: this.barPost
}, {
name: '回帖',
type: 'bar',
markLine: {
data: [{
name: '平均線',
// 支持 'average', 'min', 'max'
type: 'average',
}, ],
// 標籤的樣式在這裏設置
lineStyle: {
color: '#334B5C',
width: 2,
// type: "solid",
},
label: {
normal: {
position: 'middle',
show: true,
formatter: '{b} : {c}' // 平均線的文字描述 b名稱 c值
}
},
// formatter: '{b}: {d}'
},
data: this.barRep
},
],
barMaxWidth: '60',
barCateGoryGap: '10%',
// dataZoom: [{
// // 這個dataZoom組件，默認 控制x軸。
// type: "slider", // 這個 dataZoom 組件是 slider 型 dataZoom 組件
// start: 0, // 左邊在 10% 的位置。
// end: 100 // 右邊在 60% 的位置。
// }],
})
}
接下來上圖
