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 });}});
}
```