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'
            })
          })
        })
    })