首先安置一个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，又到说再见的时候了~