0
点赞
收藏
分享

微信扫一扫

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

七千22 2022-04-06 阅读 67
javascript
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" 
        }
      }
    }
  ]
};

对应的效果图,如下:

 

 

举报

相关推荐

0 条评论