echarts折线图的点没有显示正确颜色，如下配置为什么不生效？

Question

配置如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    left: 'center',
    top: 'top',
    orient: 'horizontal',
    categories: ['0', '失控', '2202', '2203', '2204'],
    textStyle: {
      fontSize: 20
    },
    inRange: {
      color: ['#ff0000', '#FFFF00', '#5793f3', '#45b97c', '#FF9933', '#FFFF00']
    }
  },
  series: [
    {
      data: [
        [0, 1.4818020628638933, '2202'],
        [1, 1.4747585477284542, '2202'],
        [2, 0.9, '失控'],
        [3, 1.4747585477284542, '2203']
      ],
      type: 'line'
    }
  ]
};

按道理第三个点应该显示对应的黄色，但这里却不显示颜色。我把两处的汉字"失控"改成数字1就可以正常显示了，这是为什么呢？

Answer 1

这可能和series.data中每个纬度的第一个数据有关，你第三个纬度的第一个数据是'2202'，他可能推测成了数字，所以后面的非数字检测不到了

如果你把'2202'换成非数字如字母或中文，就可以达到预期效果了

除此之外，series还有个dimensions属性，可以设置每个维度的信息

在series上设置下dimensions也能达到预期效果，而dimensions的说明也证实了前面的猜测

Answer 2

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    type: 'piecewise',  // 设置为 'piecewise'
    left: 'center',
    top: 'top',
    orient: 'horizontal',
    categories: ['0', '失控', '2202', '2203', '2204'],
    textStyle: {
      fontSize: 20
    },
    inRange: {
      color: ['#ff0000', '#FFFF00', '#5793f3', '#45b97c', '#FF9933', '#FFFF00']
    }
  },
  series: [
    {
      data: [
        [0, 1.4818020628638933, '2202'],
        [1, 1.4747585477284542, '2202'],
        [2, 0.9, '失控'],
        [3, 1.4747585477284542, '2203']
      ],
      type: 'line'
    }
  ]
};

Answer 3

visualMap.categories选项的第一项不要设置成单纯的数字

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    left: 'center',
    top: 'top',
    orient: 'horizontal',
    categories: ['ab', '失控', '2202', '2203', '2204'],
    textStyle: {
      fontSize: 20
    },
    inRange: {
      color: ['#ff0000', '#FFFF00', '#5793f3', '#45b97c', '#FF9933', '#FFFF00']
    }
  },
  series: [
    {
      data: [
        [0, 1.4818020628638933, 'ab'],
        [1, 1.4747585477284542, '失控'],
        [2, 0.9, '2202'],
        [3, 1.4747585477284542, '2203'],
        [4, 1.4747585477284542, '2204']
      ],
      type: 'line'
    }
  ]
};