特殊柱状图,柱子数据为0隐藏,不同柱子不同颜色

//----不太清楚怎么描述 哈哈哈 记录下

    queryChart() {
      var myChartQueryChart = this.$echarts.init(
        document.getElementById('queryChart')
      )
// --------------------接口获取时使用,暂时为模拟数据,虽然不太懂设计逻辑,但是为了实现效果....
      // this.datax = this.chartData
      // if (this.datax.length === 0) {
      //   // 无数据时：展示暂无数据
      //   const dom = document.getElementById('queryChart');
      //   dom.innerHTML = '-暂无相关数据-';
      //   dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 300px';
      //   dom.removeAttribute('_echarts_instance_');
      // } else {
      // console.log('123', this.datax)
      // let arr2 = [];
      // for (let i = 0; i < this.datax.length; i++) {
      //   arr2.push(this.datax[i].clzl);
      // }
      const colorsData = {
        偏其他型: {color: '#00bced'},
        偏综合型: {color: '#ffd458'},
        粗颗粒物型: {color: '#ffa10d'},
        偏二次型: {color: '#78c05f'},
        偏机动车型: {color: '#41a01f'},
        偏燃煤型: {color: '#ff7171'}
      }
      const chartData = [[{type: '偏其他型', num: '3'}], [{type: '偏综合型', num: '6'}], [{
        type: '偏其他型',
        num: '5'
      }], [{type: '偏机动车型', num: '9'}], [{type: '偏燃煤型', num: '3'}]]
      var series = [];
      var xData = []
      var xData1 = []
      var xData2 = []
      var xData3 = []
      var xData4 = []
      var xData5 = []
      var xData6 = []
      var colorData = []
      var typeData = []
 //通过数据处理把一个类型的数据放到一个数组中,不是这个类型的数据用0或者''来占位,
 //  !!!这样会产生新的问题----x轴一个数据(例如x轴为01;00时)会显示五条柱子(其他柱子数值为0,但是占了位置现有的柱子就不会居中显示)
 //-------通过柱子折叠(stack: "AA")合并为一个柱子 就只占了一个柱子的位置  
 // 但是这样会在tooltip的时候会显示其他类型数值为0 ,通过tooltip formatter函数把数据为0的去掉
 //最终展示为正常的 
      for (var i = 0; i < chartData.length; i++) {
        if (chartData[i][0].type === '偏其他型') {
          xData1[i] = chartData[i][0].num
        } else {
          xData1[i] = 0
        }
        if (chartData[i][0].type === '偏综合型') {
          xData2[i] = chartData[i][0].num
        } else {
          xData2[i] = 0
        }
        if (chartData[i][0].type === '粗颗粒物型') {
          xData3[i] = chartData[i][0].num
        } else {
          xData3[i] = 0
        }
        if (chartData[i][0].type === '偏二次型') {
          xData4[i] = chartData[i][0].num
        } else {
          xData4[i] = 0
        }
        if (chartData[i][0].type === '偏机动车型') {
          xData5[i] = chartData[i][0].num
        } else {
          xData5[i] = 0
        }
        if (chartData[i][0].type === '偏燃煤型') {
          xData6[i] = chartData[i][0].num
        } else {
          xData6[i] = 0
        }
      }
      this.optionQueryChart = {
        // backgroundColor: "#0f375f",
        grid: {
          top: '12%',
          bottom: '10%', //也可设置left和right设置距离来控制图表的大小
          left: "8%",
          right: "5%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              show: true,
              color: '#666'
            }
          },
          formatter: (params) => {
            // console.log('params', params)
            let templete = '';
            let title = ''
            let pqt = ''
            let pzh = ''
            let cklw = ''
            let pec = ''
            let pjdc = ''
            let prm = ''
            let zx = ''
            for (let i = 0; i < params.length; i++) {
              let item = params[i];
              // console.log('item', item)
              title = item.axisValueLabel
              // templete += '总数' + '<br>' + (item.seriesName + `: ` + item.data + '(km/h)') + '<br>'
              if (item.seriesName === '偏其他型') {
                if (item.data) {
                  pqt = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '偏综合型') {
                if (item.data) {
                  pzh = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '粗颗粒物型') {
                if (item.data) {
                  cklw = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '偏二次型') {
                if (item.data) {
                  pec = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '偏机动车型') {
                if (item.data) {
                  pjdc = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '偏燃煤型') {
                if (item.data) {
                  prm = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              if (item.seriesName === '折线') {
                if (item.data) {
                  zx = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
                }
              }
              //
              templete = title + '<br>' + pqt + pzh + cklw + pec + pjdc + prm + zx
            }
            return templete
          },
          // formatter
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "#fff", // 提示框浮层的背景颜色
          padding: [15, 25], // 提示框浮层内边距，单位px
          position: "left",
          textStyle: {
            color: "#333", // 文字的颜色
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },
        },
        legend: {
          data: ['偏其他型', '偏综合型', '粗颗粒物型', '偏二次型', '偏机动车型', '偏燃煤型', '折线'],
          top: '3%',
          // icon: "circle",
          // itemHeight: 8,
          // itemWidth: 8,
          textStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        xAxis: {
          // data: arr2,
          data: ['01:00', '02:00', ' 03:00', '04:00', '05:00'],
          axisLine: {
            show: true,//隐藏X轴轴线
            lineStyle: {
              color: "#ebeef5"
            },
          },
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666', //X轴文字颜色,
              fontSize: 14
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: 'PM₂.₅浓度/ug/m³',
            nameTextStyle: {
              color: '#666',
              fontSize: 14
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ebeef5"
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666',
                fontSize: 14
              }
            }
          },
          {
            type: 'value',
            // name: '%',
            max: '100',
            nameTextStyle: {
              color: '#666',
              fontSize: 14
            },
            position: 'right',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ebeef5"
              },
            },
            axisLabel: {
              show: true,
              formatter: '{value} ', //右侧Y轴文字显示
              textStyle: {
                color: '#666',
                fontSize: 14
              }
            }
          }
        ],
        series:
 //  一个时间点只显示一条一个类型的数据,
    //通过数据为0来隐藏其他柱子,柱子折叠来隐藏数据为0时占得位置
    //stack: "AA", 为同一属性,折叠在一块
          [
            {
              name: '偏其他型',
              data: xData1,
              type: 'bar',
              barWidth: 10,
              stack: "AA",
              lineStyle: {
                color: '#00bced'
              },
              itemStyle: {
                color: '#00bced'
              },
            },
            {
              name: '偏综合型',
              data: xData2,
              stack: "AA",
              type: 'bar',
              barWidth: 10,
              lineStyle: {
                color: '#ffd458'
              },
              itemStyle: {
                color: '#ffd458'
              },
            },
            {
              name: '粗颗粒物型',
              data: xData3,
              stack: "AA",
              type: 'bar',
              barWidth: 10,
              lineStyle: {
                color: '#ffa10d'
              },
              itemStyle: {
                color: '#ffa10d'
              },
            },
            {
              name: '偏二次型',
              data: xData4,
              stack: "AA",
              type: 'bar',
              barWidth: 10,
              lineStyle: {
                color: '#78c05f'
              },
              itemStyle: {
                color: '#78c05f'
              },
            },
            {
              name: '偏机动车型',
              data: xData5,
              stack: "AA",
              type: 'bar',
              barWidth: 10,
              lineStyle: {
                color: '#41a01f'
              },
              itemStyle: {
                color: '#41a01f'
              },
            },
            {
              name: '偏燃煤型',
              data: xData6,
              stack: "AA",
              type: 'bar',
              barWidth: 10,
              lineStyle: {
                color: '#ff7171'
              },
              itemStyle: {
                color: '#ff7171'
              },
            },
            {
              name: '折线',
              type: 'line',
              smooth: false, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
              itemStyle: {
                //折线拐点标志的样式
                color: '#99acff'
              },
              lineStyle: {
                color: '#99acff'
              },
              data: ['12', '23', '13', '45', '14']
            },
          ]
      }
      myChartQueryChart.setOption(this.optionQueryChart, true)
      myChartQueryChart.resize({
        height: '400px',
        // width: '1500px'
      })
      // }
    },复制