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

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

    queryChart() {
      var myChartQueryChart = this.$echarts.init(
        document.getElementById('queryChart')
      )

      
      
      
      
      
      
      
      
      
      
      
      
      
      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 = []
 
 
 
 
 
      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 = {
        
        grid: {
          top: '12%',
          bottom: '10%', 
          left: "8%",
          right: "5%",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              show: true,
              color: '#666'
            }
          },
          formatter: (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];
              
              title = item.axisValueLabel
              
              if (item.seriesName === '偏其他型') {
                if (item.data) {
                  pqt = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '偏综合型') {
                if (item.data) {
                  pzh = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '粗颗粒物型') {
                if (item.data) {
                  cklw = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '偏二次型') {
                if (item.data) {
                  pec = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '偏机动车型') {
                if (item.data) {
                  pjdc = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '偏燃煤型') {
                if (item.data) {
                  prm = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              if (item.seriesName === '折线') {
                if (item.data) {
                  zx = (item.seriesName + `: ` + item.data + 'ug/m³') + '
'
                }
              }
              
              templete = title + '
' + pqt + pzh + cklw + pec + pjdc + prm + zx
            }
            return templete
          },
          
          confine: true, 
          backgroundColor: "#fff", 
          padding: [15, 25], 
          position: "left",
          textStyle: {
            color: "#333", 
            fontStyle: "normal", 
            fontWeight: "normal", 
          },
        },
        legend: {
          data: ['偏其他型', '偏综合型', '粗颗粒物型', '偏二次型', '偏机动车型', '偏燃煤型', '折线'],
          top: '3%',
          
          
          
          textStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        xAxis: {
          
          data: ['01:00', '02:00', '03:00', '04:00', '05:00'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ebeef5"
            },
          },
          axisTick: {
            show: false 
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666', 
              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',
            
            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}', 
              textStyle: {
                color: '#666',
                fontSize: 14
              }
            }
          }
        ],
        series:
 
    
    
          [
            {
              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, 
              itemStyle: {
                
                color: '#99acff'
              },
              lineStyle: {
                color: '#99acff'
              },
              data: ['12', '23', '13', '45', '14']
            },
          ]
      }
      myChartQueryChart.setOption(this.optionQueryChart, true)
      myChartQueryChart.resize({
        height: '400px',
        
      })
      
    },