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

Question

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

我正在使用echarts的4.2.1版本。 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';
    }
}