echarts柱状图：指定某根柱子颜色，并显示对应横坐标的xAxis的data文字（其他隐藏）

最新推荐文章于 2022-07-14 17:01:58 发布

mingjuna2010

最新推荐文章于 2022-07-14 17:01:58 发布

阅读量1.6k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/mingjuna2010/article/details/109702937

版权

本文介绍了如何在Echarts柱状图中指定某根柱子的颜色，并只显示该柱子对应的横坐标数据文字。通过设置颜色数组和判断条件来改变颜色，利用xAxis.axisLabel配置控制显示特定的文字，如设置不需要显示的文字颜色为透明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

指定某根柱子颜色：使用颜色数组，判断后指定颜色；
显示某根柱子对应横坐标的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) {
            col