首先安置一個div裝echarts；
<div id="echarts" style="width:100%;height:500px; top: 10%;display: flex;">
<a style="position:absolute;left:58%;top:10%;z-index:3;cursor:pointer;color:blue;font-size:17px;" v-on:click="dynamicControl">采購詳情>></a>
<div id="reCharts" style="width:auto;height:500px; top: 10%;"></div>
</div>
在data初始化；
materialStatistics: {
color: ['#056BD5', '#AE1D3A', '#83C23B'],
title: {
text: 'hotel california', //圖表標題
x: 'center',
y: 'top',
textAlign: 'center',
textStyle: {
fontSize: '30',
color: "#333"
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: {
data: ['對外投標價(萬元)', '預估金額(萬元)', '采購金額(萬元)'], //縱軸標量
//left: 'right',
textStyle: {
fontSize: '16',
color: "#333",
padding: [4, 10],
},
y: 'bottom'
},
xAxis: {
type: 'category',
data: ['招標材料', '集采材料', '其他材料'], //橫軸
//name: '節點',
axisLabel: {
interval: 0,//橫軸信息全部顯示
//rotate: 10,//度角傾斜顯示
fontSize: '16'
},
nameTextStyle: {
fontSize: '18',
color: "#333"
}
},
yAxis: {
type: 'value',
nameTextStyle: {
fontSize: '18',
color: "#333"
},
axisLabel: {
fontSize: '16'
},
axisLine: {
show: false //y軸線消失
},
splitLine: {
show: true, // 網格線是否顯示
}
},
series: [
{
name: '對外投標價(萬元)',
type: 'bar',
//stack: '合計',
//barWidth: '24px',
data: [1000, 500, 50]
},
{
name: '預估金額(萬元)',
type: 'bar',
//stack: '合計',
data: [800, 300, 45],
//barWidth: '24px',
},
{
name: '采購金額(萬元)',
type: 'bar',
//stack: '合計',
data: [700, 270, 40],
//barWidth: '24px',
}
]
}
初始化數據綁定；
let tbData = [], ygData = [], qtData = [];
......賦值階段省略......
vm.materialStatistics.series.forEach(v => {
if (v.name == '對外投標價(萬元)') {
v.data = tbData
} else if (v.name == '預估金額(萬元)') {
v.data = ygData
} else if (v.name == '采購金額(萬元)') {
v.data = qtData
}
});
var myCharts = echarts.init(document.getElementById('reCharts'));
myCharts.setOption(vm.materialStatistics);
顯示結果圖列：
要問喜不喜歡這個行業，其實一點都沒有；向往美國西部，向往沙漠無人區；美麗的八音盒打開的那天，世界才是彩色的。
好啦，伴隨着passenger的hotel california，又到說再見的時候了~