echarts柱状图柱子宽度自适应浏览器宽度，不重叠

Question

问题描述

柱状图柱子的宽度根据浏览器宽度只适应，比如有10根柱子，初始化显示的时候如果浏览器宽度小，那么要求柱子不能有重叠，

问题出现的环境背景及自己尝试过哪些方法

echart中柱状图的api有一个barWidth,这个怎么写动态的宽度

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
series: [

    {
      data: yArr,
      type: 'bar',
      barWidth: '40',
      barCategoryGap: '0',
      itemStyle: {
        normal: {
          color: function (params) {
            var colorList = color;
            return colorList[params.dataIndex];
          }
        }
      }
    },{
      data: varianceArr,
      type: 'line',
      yAxisIndex: 1,
    }
  ]

你期待的结果是什么？实际看到的错误信息又是什么？

期待可以看到的是，当浏览器宽度小时，柱子没重合的。柱子的个数是从接口数据中返回的，有可能10个，也有可能更多，不是固定的

Answer 1

柱状图本身就是自适应宽度的吧

Answer 2

可以做一个适应，类似于这个