echarts 当x轴汉字返回的名字 一样时,该怎么整理数据

168 阅读1分钟

image.png

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() {
}