x轴 后端返回的name名称有时候会一样,一样的就显示不出来,只显示其中一个,所以 需要整理一个x轴数据格式
<div id="barCharts" style="width: 800px; height: 230px;"></div>
methods:{
getGroupDeviceHistogram() {
let data = {
orgId:localStorage.getItem('orgId')
}
getGroupDeviceHistogram(data).then((data)=>{
if(data.data.code == '200') {
let resource = data.data.data
this.barEdata = resource.map((item, index) => ({
name: `${item.name}-${index}`, //这个是关键,用index来区分
运行: item.yxs ? item.yxs : 0,
离线: item.offLine? item.offLine : 0,
故障: item.gzs ? item.gzs : 0,
待机: item.djs ? item.djs : 0
}))
this.initBarCharts(this.barEdata)
} else {
this.$message({
type: 'info',
message: '获取失败'
});
}
})
},
initBarCharts(data) {
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(param) {
return `待机:${param[0].value.待机}<br/> 故障:${param[0].value.故障}<br />离线: ${param[0].value.离线}<br />运行: ${param[0].value.运行}`
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataset: {
dimensions: ['name', '运行', '离线', '故障', '待机'],
source: data
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (value) {
return value.split('-')[0]; //在x轴把-后面的index去掉
}
}
},
yAxis: {},
series: [{
type: 'bar',
stack: 'total',
}, {
type: 'bar',
stack: 'total',
}, {
type: 'bar',
stack: 'total',
},{
type: 'bar',
stack: 'total',
}]
};
this.barE = echarts.init(document.getElementById('barCharts'))
this.barE.setOption(option)
},
// async getPowerOnDeviceForArea() {
}