echarts图表 的X轴添加滚动条

简介: echarts图表 的X轴添加滚动条

1:原图

c0d915b8f51e49868b4fb06786a32e2c.png

2:代码

    dataZoom = [
        {
            orient: 'horizontal',
            show: scoreShow,//控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 5, //滚动条高度
            start: 0, //滚动条开始位置(共6等份)
            end: this.endValue,//滚动条结束位置
            top: '95%',
            bottom: '4%',
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5,// 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            fillerColor: 'rgba(255, 255, 255,0.5)',
        },
        {
            type: 'inside',
            brushSelect: true,
            start: 0,
            end: 6,
            xAxisIndex: [0],
            moveOnMouseMove: true,//是否只平移不缩放
            zoomLock: true,// 鼠标移动触发窗口平移
            zoomOnMouseWheel: false,//鼠标移动能触发窗口缩放
        },
    ]

3:效果

8dc62cf0800b45329bce77595fcb2c3d.png

目录
相关文章
|
11天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
29 0
|
14天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
15天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
18 0
|
15天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
16 0
|
21天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
22天前
echarts图表
echarts图表
|
24天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
16 0
|
28天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
101 0
|
29天前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
1月前
|
JavaScript
Vue引入Echarts图表的使用
Vue引入Echarts图表的使用