echarts dataZoom 简单自定义样式及监听 datazoom 变化

1|0场景

  • echarts 表自带的默认dataZoom样式挺丑的,需要简单的修改一下样式。但是其实对其操刀的局限性很大,遇到比较个性化的滚动条样式的时候,走自定义滚动条,绑定dataZoom属性会比较好。
  • 需要监听dataZoom值发生变化来触发页面更新

2|0解决

  • 简单自定义
    • 对图表的option的dataZoom属性进行修改
    const option = { ··· dataZoom: [{ type: 'slider', // slider表示有滑动块的,inside表示内置的 show: true, // 是否显示dataZoom,在完全自定义的时候需要用到 xAxisIndex: [0], // dataZoom控制的图标的是哪条x轴,因为会有多轴一图,可以控制多轴 yAxisIndex: [0,1], // dataZoom控制的图标的是哪条y轴,因为会有多轴一图,可以控制多轴 start: 10, // 和startValue不要弄混,这里是百分比 end: 50, // 和endValue不要弄混,这里是百分比 startValue: 0, // 滑块左端对应的x值 endValue: 500, // 滑块右端对应的x值 height: 10, // dataZoom整体高度 filterMode: 'none', // 过滤模式,有filter, weakFilter, empty, none四个值,过滤会把整个数据段隐藏,而none则只是移动坐标轴 left: 0, right: 0, top: 0, bottom: 0, // dataZoom相对图标的位置 animation:true, // 设置动画效果 throttle: 100, // 设置视图刷新的频率,ms showDetail: false, showDataShadow: false, borderColor: '#0000', // dataZoom边框颜色 fillerColor: '#ffffff4c', // 滑块颜色 handleSize: '0%', brushSelect: false // 是否允许拖动滑块长度改变视图范围,不允许就是固定范围 }] }
  • 监听dataZoom
this.chart = echarts.init(this.$refs.test) this.chart.on('datazoom', () => { const datazoom = that.chart.getOption().dataZoom[0] // 用getOption获取改变的值 })

__EOF__

本文作者Mizuki
本文链接https://www.cnblogs.com/mizuki-vone/p/16922264.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Mizuki-Vone  阅读(5033)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示