堆叠的柱状图怎么填满整个容器的宽度的？

来源：2-13 累计用户数组件开发2

杜渐

2021-10-29

老师的示例里就是填满的，我照搬的却右边长度不够
图片描述

chart.setOption({
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        show: false
      },
      series: [{
        type: 'bar',
        stack: 'total',
        data: [200],
        barWidth: 10,
        itemStyle: {
          color: '#45c946'
        }
      }, {
        type: 'bar',
        stack: 'total',
        data: [250],
        itemStyle: {
          color: '#eee'
        }
      }],
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    })

写回答

5回答

递弱代偿_cz

2022-08-18

                xAxis: {
                    type: 'value',
                    show: false,
                    max: function (value) {
                        // 说明下 这个计算方法是因为:
                        // series 中所有对象的 data 的最大值求和为 value 的 max
                        // series 中取所有对象的 data 的最小值 为 value 的 min
                        // 本例的 value.max = 200 + 250 + 200 value.min = 200
                        // 因此，计算方式为 value.max - value.min * 2
                        return value.max - value.min * 2
                    }
                },

我是这么理解了，如有错误请各位大佬指教，谢谢

慕沐0537814

2022-05-08

已解决：

xAxis: {
        type: "value",
        show: false,
        max: function (value) {
          return value.max;
        },
      },

帅的被人砍_

2022-03-14

grid: {

top: 0,

bottom: 0,

left: 0,

right: 0

}

weixin_慕盖茨8478392

2022-01-10

//img.mukewang.com/szimg/61dbd8eb099e4c5e07810092.jpg

会不会这里没有加格式？我也是小白，仅供参考

慕运维1161037

2021-12-24

我i也遇到了这个问题，怎么到现在还没人解答

weixin_慕田峪7122337

你好，你这个问题解决了吗

2022-01-08

共1条回复

Vue + EChart 4.0 从0到1打造商业级数据报表项目

数据可视化是未来前端技术的标配，是未来前端竞争的破冰利器

5701 学习 · 79 问题

查看课程

相似问题

请问为什么我的柱状图无法填满容器

回答 2

设置了stack，并没有像重叠

回答 1

我在两个数据中设置了stack属性后，bar图没有重叠，而是两个bar按照比例显示，这是为什么啊

回答 2

地图不显示

回答 2

echart图表显示不出来

回答 2

打开慕课网App查看更多内容