echars堆叠柱状图,当上面数据为0时,下面的是圆角,反之上面圆角,下面直角

let xAxisData = [];
let redm = [1,1,3,3,2,4,2,1,3,3];
let yellowm = [1,2,1,0,1,0,3,2,0,3];
let redyellowm = [];
for (let i = 0; i < 10; i++) {
  xAxisData.push('地市' + i);
}
for (let i = 0; i < 10; i++) {
  redyellowm.push({
    red: redm[i],
    yellow: yellowm[i]
  });
}
option = {
  color: ['#f80619', '#fff202'],
  legend: {
    data: ['红码', '黄码'],
    left: '10%'
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    name: '地区',
  },
  yAxis: {},
  grid: {
    bottom: 100
  },
  series: [
    {
      name: '红码',
      type: 'bar',
      stack: 'one',
      data: redyellowm.map(item => {
        return {
          value: item.red,
          itemStyle: {
            normal: {
              barBorderRadius: item.yellow == 0 ? [20, 20, 0, 0] : [0, 0, 0, 0], // 动态设置柱状图圆角
              color:"#f80619" 
            }
          }
        }
      }),
    },
    {
      name: '黄码',
      type: 'bar',
      stack: 'one',
      data: yellowm,
      itemStyle: {
        normal: {
          barBorderRadius:  [20, 20, 0, 0],
          color:"#fff202" 
        }
      }
    }
  ]
};

对应的效果图,如下:

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值