ECharts - 将两种不同的颜色应用于同一轴上的标签

Question

我想将两种不同的颜色应用于图表上同一 X 轴的标签。

我正在使用 4.2.1 版的 echarts。 X 轴标签的范围从 0 到 1,000，增量为 100。

我想将前六个标签（即 0、100、200、300、400、500）设为红色；然后其余的标签（即 600、700、800、900、1000）为蓝色。

在官方文档中显示我们可以通过以下代码为X轴标签指定一种颜色：

           xAxis: {
                      name: 'Population',
                      axisLabel: {
                          textStyle: {
                              color: 'red'
                          }
                      },
                  }

我尝试运行如下的基本 if 函数，但它不起作用。不确定我应该在 if 括号中使用什么变量名。

             axisLabel: {
                          textStyle: {
                              if (axisLabel < 600) {
                                color: 'red';
                              }
                              else {
                                color: 'blue';
                              }
                          }
                      },

Answer 1

axis.axisLabel.color支持函数，可以这样设置：

color: function(value, index) {
    if (index < 6) {
        return 'red';
    }
    else {
        return 'blue';
    }
}