问题描述
今天是第一次修改Echars图表,当时第一眼一看,咋那么复杂呢,我的需求是
将图标中的文字改为倾斜|列表可以根据鼠标滑轮动态改变x轴数据,其实说白了就是在图表底部加个滚动条
,下面来看下代码,如何解决的吧!
解决方案
问题1:在你的
xAxis标签
下,添加如下代码axisLabel
,根据rotate
调整倾斜的角度
xAxis:[ { axisLabel: { interval:0, rotate:30 } } ]
问题2:在
xAxis
同级下添加如下代码,实现根据鼠标滑轮自动改变x轴数据
dataZoom:[ { type: 'slider', show: false,//隐藏图表底部滚动条 设置为true是图表底部就会有滚动条 height: 5, bottom: 0, start: 50, end: 100, textStyle: { // color: '#d4ffff', fontSize: 0, }, }, { type: 'inside' } ],