echarts-柱状图实现正负坐标倒圆角设置及bar颜色设置

需求：

1.每根bar正负坐标倒圆角 2.每根bar颜色渐变 3.三类数据，只有第三类数据会出现负数，其他两类均为正数（A、B、C三类数据，只有C有负数）

如图：

实现：

1.样式

this.series = [
        {
          name: 'A',
          type: 'bar',
          data: [],
          itemStyle: {
            normal: {
              borderRadius: [15, 15, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#080a45" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#265da8" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#1cedfa" // 100% 处的颜色
              }], false)
            }
          },
        },
        {
          name: 'B',
          type: 'bar',
          data: [],
          itemStyle: {
            normal: {
              barBorderRadius: [15, 15, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#011c36" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#017657" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#00e8a7" // 100% 处的颜色
              }], false)
            }
          },
        },
        {
          name: 'C',   //不可缺少，否则C的legend标题不显示
          type: 'bar',
          data: [],
          itemStyle: {  //不可缺少，否则C的legend颜色块不显示
            normal: {
              // barBorderRadius: [15, 15, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#19134f" // 0% 处的颜色
              }, {
                offset: 0.6,
                color: "#552eaa" // 60% 处的颜色
              }, {
                offset: 1,
                color: "#7473d5" // 100% 处的颜色
              }], false)
            }
          },
        },
      ];

2.A、B正常添加数据即可

let seriesData = []  //用来处理C数据
for (let key in totalData) {
    this.xData.push(key)
    this.series[0].data.push(totalData[key].a);  //A数据正常添加
    this.series[1].data.push(totalData[key].b);  //B数据正常添加
    // this.series[2].data.push(totalData[key].c);
    seriesData.push(totalData[key].c)  //C数据单独处理一下
}

3.C数据单独处理

let obj = {}
seriesData.map(item => {
   obj = {
     name: 'C',
     type: 'bar',
     value: Number(item),
     // echarts对个别数据记性个性化设置
     color: Number(item) > 0 ?(new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#19134f" // 0% 处的颜色
            }, {
              offset: 0.6,
              color: "#552eaa" // 60% 处的颜色
            }, {
              offset: 1,
              color: "#7473d5" // 100% 处的颜色
            }], false)):(new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#7473d5" // 0% 处的颜色
            }, {
              offset: 0.6,
              color: "#552eaa" // 60% 处的颜色
            }, {
              offset: 1,
              color: "#19134f" // 100% 处的颜色
            }], false)),

            // 给bar设置倒角
            barBorderRadius: Number(item) > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15],
          }
        }
        this.series[2].data.push(obj)   //添加C数据
      })

至此，即可实现多类数据时，柱状图实现正负坐标倒圆角

补充

其实仔细看，能看到柱子与x轴有重叠部分 如图：

添加一句代码即可：z:4, //x轴显示（柱子与x轴重叠了）

 xAxis: [
              {
                type: 'category',
                data: this.xData,
                z:4, //就是这句，如果是y轴，写在yAxis
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,  //显示x轴
                  lineStyle: {
                    color: this.datalist[0].color[0],
                  },
                },
                axisLabel: {
                  interval: 0,//x轴全部显示
                  show: true,   //x轴的值
                  showMinLabel: true,
                  borderColor: 'rgba(200, 72, 72, 1)',
                  borderType: 'solid',
                },
              },
            ],