知识点小记：echarts折线图负数展示不一样的颜色

需求就是在增长率是负数的时候节点呈现红色，反之则为绿色。

其实也很简单，就是在设置线条颜色的时候，根据你自己的需要通过方法来配置你自己的颜色，而这个回调里面会有当前echart对象对应的相关内容。

所以我们判断值的大小就可以通过params.value来确定

 color: function (params) {
            if (params.value * 1 >= 0) {
              return "#00E785";
            }
            return "red";
          },
1
2
3
4
5
6

配置项示例

     const options = {
        grid: {
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        color: "#384757",
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.8)", //设置背景图片 rgba格式

          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#384757",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: map(data, (obj) => {
              return obj.year;
            }),
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#7d838b",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "就业增长率（%）",
            nameTextStyle: {
              color: "#fff",
            },
            show: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00E785",
              },
            },
          },
        ],
        grid: {
          top: "20%",
        },
        series: [
   

          {
            name: "就业增长率",
            type: "line",
            yAxisIndex: 1,
            label: seriesLabel,
            lineStyle: {
              // 设置线条的style等
              normal: {
                color: "#00E785", // 折线线条颜色:红色
              },
            },

            itemStyle: {
              textStyle: {
                fontWeight: 700,
              },
              color: function (params) {
                if (params.value * 1 >= 0) {
                  return "#00E785";
                }
                return "red";
              },
            },
            data: map(data, (obj) => {
              return obj.rate * 1;
            }),
          },
        ],
      };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94