echarts柱状图实现正负值不同颜色在上方显示数值

效果如图：

 核心代码：

1.  
   series: [
2.  
   {
3.  
   type: "bar",
4.  
   barMaxWidth: 25,
5.  
   data: this.YList.map((item) => {
6.  
   // 循环
7.  
   return {
8.  
   value: item,
9.  
   label: {
10.  
    show: true, //开启显示
11.  
    position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
12.  
    formatter: "{c}%",//单位
13.  
    textStyle: {
14.  
    //数值样式
15.  
    color: item < 0 ? "#229D45" : "#E93030", //数值颜色
16.  
    fontSize: "18px",
17.  
    },
18.  
    },
19.  
    };
20.  
    }),
21.  
    itemStyle: {//柱体背景色
22.  
    normal: {
23.  
    color: (val) => {
24.  
    var index_color = val.value;
25.  
    return index_color > 0 ? "#E93030" : "#229D45";
26.  
    },
27.  
    },
28.  
    },
29.  
    },
30.  
    ],

这篇好文章是转载于：学新通技术网