echarts设置滚动条或鼠标拖动滚动

1 适用场景

页面空间有限,数据无法完全展示,或者展示内容又被隐藏,或者间隔展示时,可以通过添加dataZoom配置 来优化页面体验

2 解决方案

方法一:页面直接显示滚动条, 让用户可以拖动展示-柱状图为例

c 复制代码
// html部分
 <div style="width: 500px; height:500px;" id="echartCon" ref="echartCon"></div>
// js部分
 initChart() {
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        dataZoom:[
          {
            type: "slider", // 在底部
            show: true, // 是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
            start: 0, // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
            end: 3, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
            bottom: 25, // 控制滚动条距离底部的位置;
            /**
            不指定时,当 dataZoom-slider.orient 为 'horizontal'时,
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值,建议显式指定。
            如果是 number 表示控制一个轴,如果是 Array 表示控制多个轴。
            */
            xAxisIndex: [0]
          }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      let myChart = this.$echarts.init(this.$refs.echartCon);
      myChart.setOption(option)

    },

效果:

方法二:页面不展示滚动条, 直接操作鼠标即可拖动数据展示

c 复制代码
 // 两种方式只有dataZoom配置项有区别
  dataZoom:[
          {
            type: "inside", // 内嵌入图标中
            startValue: 0, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
            endValue: 3, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
            filterMode: 'filter',
            /**
            不指定时,当 dataZoom-slider.orient 为 'horizontal'时,
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值,建议显式指定。
            如果是 number 表示控制一个轴,如果是 Array 表示控制多个轴。
            */
            xAxisIndex: [0]
          }
        ],

效果:

如果想自定义切换按钮可以在graphic中添加样式

c 复制代码
   graphic:[
          {
            type: "polygon", // 自定义图形类型为三角形
            left: "9%", // 三角形的中心位置水平方向
            bottom: "7%", // 三角形的中心位置垂直方向
            z: 100, // z 层级
            shape: {
              points: [
                [8, 16],
                [8, 8],
                [0, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", // 填充色
            },
            onclick: (event) => {
              // 在这里可以通过 event 对象访问事件数据
              // 同时,你也可以自定义传递参数
            },
          },
          {
            type: "polygon", // 自定义图形类型为三角形
            right: "4%", //三角形的中心位置水平方向
            bottom: "7%", // 三角形的中心位置垂直方向
            z: 100, // z 层级
            shape: {
              points: [ //分别设置三角形的三个顶点
                [0, 16],
                [0, 8],
                [8, 12],
              ],
            },
            style: {
              fill: "#CDE2FF", // 填充色
            },
            onclick: (event) => {
              // 在这里可以通过 event 对象访问事件数据
              // 同时,你也可以自定义传递参数,

            },
          }
          ]
相关推荐
大怪v9 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵10 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda10 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机11 小时前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu13 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了14 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎14 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端14 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
勤奋菲菲15 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀16 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序