echarts项目柱形图表渲染自适应

您所在的位置：网站首页 › excel柱状图怎么设置宽度 › echarts项目柱形图表渲染自适应

echarts项目柱形图表渲染自适应

2023-05-27 05:26| 来源: 网络整理| 查看: 265

近期开发项目遇到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%，可设固定值

【本文地址】

echarts项目柱形图表渲染自适应

echarts项目柱形图表渲染自适应

今日新闻

推荐新闻