近期开发项目遇到echarts来回切换页面不渲染等问题，现进行总结

一.echarts图来回切换页面不渲染

问题点：用户点击左侧导航栏，发起数据库请求，右侧进行echart图渲染，当用户来回多次点击时，echart图不进行渲染

解决思路：echarts进行实例化后，会在div容器上生成echarts_instance属性，该属性为唯一id，会根据该id进行渲染，所以每次点击左侧导航栏时，显式指定该div重新刷新，然后渲染即可。
在echarts调用setOption前增加如下代码即可解决

document.getElementById('div的ID').setAttribute('_echarts_instance_', '')

二.数据较多时使用dataZoom属性slider滑块，影响页面滚动

问题点：当数据较多时，使用echarts的dataZoom属性配置，当使用slider或者inside属性时，页面滚动到echarts图时会影响到整体页面的滑动

解决思路：参考官方配置文档找到如下属性，进行设置即可
dataZoom-inside.moveOnMouseWheel = true
如何触发数据窗口平移。可选值为：

• true：表示不按任何功能键，鼠标滚轮能触发数据窗口平移。
• false：表示鼠标滚轮不能触发平移。
• 'shift'：表示按住 shift 和鼠标滚轮能触发数据窗口平移。
• 'ctrl'：表示按住 ctrl 和鼠标滚轮能触发数据窗口平移。
• 'alt'：表示按住 alt 和鼠标滚轮能触发数据窗口平移。```

或者直接阻止默认行为
dataZoom-inside.preventDefaultMouseMove = true

三.echarts柱形图柱子宽度设定自适应，最大宽度和最小宽度设定

参考官方文档，不设置barWidth即可自适应，设定barMaxWidth和barMinWidth即可设定最大和最小跨度

    series-bar.barWidth 柱条的宽度，不设时自适应。
    seried-bar.barMaxWidth 柱条最大宽度，比barWidth优先级高，可以设置为绝对值40或百分比"60%"

四.echarts柱形图x轴label自适应

参考官方文档，设置interval为auto即可
xAxis.axisLabel.interval='auto'

五.echarts柱形图柱子间距的自适应

参考官方文档，设置barCategoryGap即可
series-bar.barCategoryGap='20%' 同一系列的柱间距离，默认为类目间距的20%，可设固定值