首页 前端知识 echarts 当数据过多时,我们使用dataZoom来进行缩放,但是因为数据差距过大而不显示比较大的数据的解决方法

echarts 当数据过多时,我们使用dataZoom来进行缩放,但是因为数据差距过大而不显示比较大的数据的解决方法

2024-05-12 17:05:21 前端知识 前端哥 928 811 我要收藏

1、横向缩放

[{
"type": 'slider',
"realtime": true,
"start": 0,
"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
"height": 10, //组件高度
"left": 0, //左边的距离
"right": 5, //右边的距离
"bottom": 30, //下边的距离
"show": true, // 是否展示
"fillerColor": "#D8DEEE", // 滚动条颜色
"borderColor": "#D8DEEE",
"zoomLock": true,
"fillerMode": 'filler',
"showDetail": false,
"brushSelect": false,
"dataBackground": {
"areaStyle": {
"color": '#F2F7FF'
}
}
},
{
"type": "inside", // 支持内部鼠标滚动平移
"start": 0,
"show": true,
"zoomLock": true,//开启 就是禁止滚轮缩放
"end": 100 - 1500,
"xAxisIndex": [0]//数据差距大不显示的解决
}
]
复制

2.纵向缩放

[{
"type": 'slider',
"realtime": true,
"start": 0,
"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
// "height": 5, //组件高度
"width": 10,
"left": 3, //左边的距离
"show": true, // 是否展示
"fillerColor": "rgba(17, 100, 210, 0.42)", // 滚动条颜色
"borderColor": "rgba(17, 100, 210, 0.12)",
"showDetail": false, //拖拽时是否展示滚动条两侧的文字
"zoomLock": true, //是否只平移不缩放
"moveOnMouseMove": false, //鼠标移动能触发数据窗口平移
"zoomOnMouseWheel": false, //鼠标移动能触发数据窗口缩放
"yAxisIndex": [0],
"dataZoom-slider": {
"orient": 'vertical'
},
"show": true, // 是否展示
"fillerColor": "#D8DEEE", // 滚动条颜色
"borderColor": "#D8DEEE",
// "zoomLock": true,
"fillerMode": 'filler',
"brushSelect": false,
"dataBackground": {
"areaStyle": {
"color": '#F2F7FF'
}
}
},
{
"type": "inside", // 支持内部鼠标滚动平移
"start": 0,
"end": 50,
"zoomLock": true,
// "zoomOnMouseWheel": false, // 关闭滚轮缩放
// "moveOnMouseWheel": true, // 开启滚轮平移
// "moveOnMouseMove": true, // 鼠标移动能触发数据窗口平移
"yAxisIndex": [0],//纵向数据差异过大不显示解决
}
]
复制

总结:设置"yAxisIndex": [0]或者"xAxisIndex": [0]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8394.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!