自定义echarts x轴 y轴每个刻度的文本颜色

最新推荐文章于 2023-09-01 13:56:26 发布

听听那晚风

最新推荐文章于 2023-09-01 13:56:26 发布

阅读量1k

点赞数

分类专栏： echarts vue

本文链接：https://blog.csdn.net/GongWei_/article/details/117336459

版权

vue 同时被 2 个专栏收录

58 篇文章 9 订阅

订阅专栏

echarts

17 篇文章 4 订阅

订阅专栏

在这里插入图片描述
关键点：
yAxis.axisLabel.textStyle.color、xAxis.axisLabel.textStyle.color
具体实现

yAxis: [
          {
            type: "category",
            show: true,
            inverse: false,
            data: ["80%以上", "50%-80%", "50%以下"],
            axisLine: {//刻度线显隐
              show: false,
            },
            axisTick: {//刻度
              show: false,
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              show: true,
              margin: 15,
              textStyle: {
                fontSize: 16,
                color: function (value) {
                  return value == "80%以上"
                    ? "#81D3F8"
                    : value == "50%-80%"
                    ? "#FF6600"
                    : "#FF004D";
                },
              },
              interval: 0,
            },
            inverse: true,
          },
        ],