首次进入页面dataZoom超出宽度

 错误效果图：

正确效果图：

问题分析：报错原因是，在watch监听数据的时候调用了this.mychart.clear(),但是删除this.mychart.clear()后，页面dataZoom就会超出固定宽；

网上找了一圈：

ECharts 的 setOption 方法是用来更新图表的配置项，并重新渲染图表。当你传入一个空对象时，ECharts 认为你没有提供任何新的配置信息，因此不会对图表进行任何更改操作，最后经过调试Echarts.dispose();可以代替Echarts.clear(),从而不会引起报错。

原文链接：https://blog.csdn.net/newpeople007/article/details/134446914

但是加上这个并没有达到想要的效果； 

clear清空当前实例，会移除实例中所有的组件和图表。

dispose 销毁实例，销毁后实例无法再被使用。

分析：大概是调用问题，重新封装组件，优化调用

let myChart = echarts.init(document.getElementById('main'));  
// 设置图表的配置项和数据  
let option = {
    //图例配置属性数据
}
myChart.setOption(option);  
// 调用resize方法  
myChart.resize();

删除watch里this.mychart.clear()，重新刷新页面，首次进来页面就不会出现错误效果图类似情况。