Echarts柱状图数据太多，自定义长度之后，自适应浏览器缩放

不知道是不是最优解，但是当前解决了我遇到的问题，如有更好的方法，希望看到这篇文章的同学可以不吝指导一番，非常感谢

1、问题描述：

因Ecahrts柱状图数据有时多有时少，所以在数据达到一定程度之后，必须自定义每个数据的宽度，使用滑动框来查看数据，但是当自定义数据宽度之后，再随意缩放浏览器，Ecahrts的窗口将不再自适应缩放比例，导致展示效果非常不好

2、为什么不用dataZoom

因为每个图都有配置保存为图片功能，如果使用dataZoom来实现左右滑动查看数据，那么只能将当前可视范围内的数据保存为图片，而不能将所有数据都保存为图片，当然，如果没有保存为图片，或者只需要保存当前可视范围内的数据保存成图片的同学，可以使用dataZoom来实现

3、举例

正常显示
在这里插入图片描述
异常显示

4、处理方式

export function ImplantRegionEcharts(myChart, data) {
// 这里的配置只会在第一次加载的时候执行，并不能Get到浏览器缩放事件
// 当数据大于13条之后，将自定义Echarts的宽度
  if (data.length >= 14) {
  	// * 70，+150 这些数据都可以自己修改
    const autoWidth = data.length * 70 + 150;
    myChart.resize({ width: autoWidth });
  } else {
  // 当数据小于14条时，根据配置的Echarts宽度来自适应
  // 浏览器宽度分成24份，Echarts宽度占了14份，所以当前计算为：Echarts宽度 = 浏览器宽度 / 24 * 14，
  // -35px是因为有的时候Echarts右侧显示不全，可以自己修改
    myChart.resize({ width: document.body.clientWidth / 24 * 14 - 35 });
    // 如果else不配置也可以，浏览器缩放捕获方法直接用myChart.resize()就行，
    // 但是当浏览器缩放到50%及以下，所有数据都在可视化窗口展示的时候，还是会出现异常显示
    // 50%及以下基本上不会有人切换到，所以基本不用配置else，别问我为什么还要配置，问就是强迫症
  }
  const title = "XXXX";
  const option = {......} // 自己的配置
  if (data.length) {
    // 如果切换数据Echarts图出现混乱，则可以先清空再加载
    // myChart.clear();
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
  } else {
    // 没有数据时显示暂无数据
    myChart.setOption({
      title: [
        {
          text: title,
          top: 5,
          left: 10
        },
        {
          subtext: "暂无数据",
          top: "center",
          left: "center",
          subtextStyle: {
            fontSize: 24
          }
        }
      ]
    }, true);
  }
  // 浏览器缩放可以被该配置捕获到
  window.addEventListener("resize", function() {
  	// 如果没有配置Echarts宽度，则可以直接使用：myChart.resize()
  	// myChart.resize();
  	// 如果自定义了Echarts宽度，我使用的如上的处理方式
    if (data.length >= 14) {
      const autoWidth = data.length * 70 + 150;
      myChart.resize({ width: autoWidth });
    } else {
      myChart.resize({ width: document.body.clientWidth / 24 * 14 - 35 });
    }
  });
}
```