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 对象访问事件数据
              // 同时,你也可以自定义传递参数,

            },
          }
          ]
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹11 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript