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

最新推荐文章于 2024-06-26 15:29:39 发布

joney_zy

最新推荐文章于 2024-06-26 15:29:39 发布

阅读量594

点赞数 1

分类专栏： echars 插件文章标签： javascript

本文链接：https://blog.csdn.net/HL_xzf/article/details/123995725

版权

插件同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

echars

2 篇文章 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" 
        }
      }
    }
  ]
};

对应的效果图，如下：