问题描述
今天是第一次修改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'
}
],