echarts柱狀圖：指定某根柱子顔色，并顯示對應橫坐标的xAxis的data文字（其他隐藏）

思路：

指定某根柱子顔色：使用顔色數組，判斷後指定顔色；

顯示某根柱子對應橫坐标的xAxis的data文字（其他隐藏）：顯示所有的xAxis的data文字，通過data的配置，可将需要隐藏的data的文字設定為透明色（transparent），若文字還是不顯示，考慮是文字過長，可以設定xAxis.axisLabel.interval = 0

資料處理

// 設定所有的顔色都為'#00A1E9'，傳回colors
  setAllColor(xData){
    return new Promise((resolve=>{
      var colors = [];
      for (let i = 0; i < xData.length; i++) {
          colors.push('#00A1E9');
      }
      resolve(colors)
    }))
  },
  // 設定所有的顔色都為'#00A1E9'，datas對應index的顔色設定為'#EE4B46'，傳回colorRes
  setColors(datas, name, xData) {
    return new Promise((resolve => {
      this.setAllColor(xData).then(colorRes=>{
        datas.forEach((item, index) => {
          if (item == name) {
            colorRes[index] = '#EE4B46'
          }
        })
        resolve(colorRes)
      })
    }))
  },
  // 處理xData，比對需要顯示的data，直接push本身，否則将本身指派給obj對象的value，然後push相應的obj對象，傳回出來之後的xData
  setAbscissadata(datas, name) {
    return new Promise((resolve => {
      var xData = [];
      datas.forEach((item, index) => {
        let obj = {
          value: '',
          textStyle: {
            color: 'transparent'
          }
        }
        if (item == name) {
          xData.push(item)
        } else {
          obj.value = item
          xData.push(obj)
        }
      })
      resolve(xData)
    }))
  },
           

配置項代碼：

// 接口請求
    energyRanking(this.buildId).then(res => {
    // 接口資料
      this.buildingEnergyRankData = res.body.analysisGroupDtoBuildType
      // 調用setColors方法，使用其傳回值作為顔色清單
      this.setColors(this.buildingEnergyRankData.xaxisData, this.buildInfo.buildName, this.buildingEnergyRankData
        .analysisGroupDtoList[0].data).then(res=>{
        // 調用setAbscissadata方法，使用其傳回值作為xAxis.data
          this.setAbscissadata(this.buildingEnergyRankData.xaxisData, this.buildInfo.buildName).then(innerRes =>{
            let seriesColors = {
              //通常情況下：
              normal: {
                //每個柱子的顔色即為colorList數組裡的每一項，如果柱子數目多于colorList的長度，則柱子顔色循環使用該數組
                color: function(params) {
                  var colorList = res; // 使用setColors方法的傳回值作為colorList
                  return colorList[params.dataIndex];
                }
              },
              //滑鼠懸停時：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
            this.buildingEnergyRankData.analysisGroupDtoList[0].itemStyle = seriesColors  // 使用處理之後的顔色數組
            var buildingEnergyRankContainer = echarts.init(
              document.getElementById('buildingEnergyRankContainer')
            )
            const chartsWidth = this.$refs.buildingEnergyRankBox.offsetWidth
            this.buildingEnergyRankWidth = chartsWidth
            var option = {
              title: {
                text: this.buildingEnergyRankData.title
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: this.buildingEnergyRankData.legendData
              },
              grid: {
                x: 70
              },
              dataZoom: [{
                start: 0,
                end: 30,
                show: true
              }],
              xAxis: [{
                type: "category",
                data: innerRes,  // 使用處理之後的xData
                name: this.buildingEnergyRankData.xaxisUnit,
                axisLabel: {
                  interval: 0,  // 若相應的文字還是不顯示，請配置interval:0
                  show: true
                }
              }],
              yAxis: [{
                type: 'value',
                name: this.buildingEnergyRankData.yaxisUnit,
                minInterval: 1
              }],
              series: this.buildingEnergyRankData.analysisGroupDtoList
            }
            buildingEnergyRankContainer.setOption(option)
            buildingEnergyRankContainer.resize({
              height: 'auto',
              width: 'auto'
            })
          })
        })
    })