ECharts动态改变柱状图柱子上方显示文字颜色、修改单个柱子的颜色等

林中明月间。

已于 2025-03-13 11:11:56 修改

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue+Echart 文章标签： echarts javascript ecmascript

于 2022-06-02 09:56:31 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/125095374

Vue+Echart 专栏收录该内容

21 篇文章

订阅专栏

该博客介绍了如何在 ECharts 图表中不改变柱子颜色的情况下，自定义柱状图顶部标签的颜色。通过设置 `data` 中的 `label.normal.color` 属性以及 `itemStyle.normal.label` 的配置，可以实现不同条件下的颜色变化，例如根据值的大小来决定标签是显示橙色、红色还是白色。此外，还展示了如何通过 `formatter` 函数动态生成标签内容。

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

修改单个柱子的颜色等

//在赋值的data里面写样式即可

series: [
            {
              type: 'bar',
              color: '#53D7E6',
              barWidth: 38,
              data: [{value: 92844,itemStyle: {color: '#008fff'}}, 85238, 75994, 68157, 55469, 37759]
            }
          ]

不改变柱子颜色

第一种：直接放data里面可行

datas.secondValues[i] = {
          value: linePercent,
          label: {
            normal: {
              color: numColor,
              fontSize: this.height * 0.05,
            },
          },
        };


 onDataUpdate(data) {
          series: [
            {
              data: data.secondValues,
            },
          ],
        });
      }
    },

secondValues包含：value,label-normal-color

注释部分就是重点

series: [
          {
            name: "全年规划数",
            type: "bar",
            data: barData,
            barWidth: "30%",
            itemStyle: {
              normal: {
                barBorderRadius: [
                color: "",
                label: {
                  show: true, //是否开启柱子顶部文字显示
                  position: "top", //在上方显示 文字显示方向
                  color: "#FFF",
                  fontSize: this.height * 0.07,
                  /*  formatter: function (item, index) {//index为undefined 下标正确为item.dataIndex
                    let returnStr = "";
                    if (item.value < 3) {
                      returnStr = item.value + " \n ";
                      return "{a|" + returnStr + "}";
                    } else if (item.value > 3) {
                      return "{b|" + returnStr + "}";
                    } else {
                      return "{c|" + returnStr + "}";
                    }
                  },
                  rich: {
                    a: {
                      color: "orange",
                    },
                    b: {
                      color: "red",
                    },
                    c: {
                      //默认
                      color: "white",
                    },
                  }, */
                },
              },
            },
          },
        ],