【echarts】拖拽滑块dataZoom-slider自定义样式,简单适配移动端

电脑端

移动端

代码片段

js 复制代码
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        backgroundColor: '#F2F5F9',
        fillerColor: '#BFCCE3',
        height: 13, // 设置slider的高度为15
        start: 0,
        end: 100,
        right: 60,
        left: 60,
        bottom: 15,
        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
        handleSize: '200%', // 放大按钮
        borderColor: 'none',
        handleStyle: {
          color: '#BFCCE3',
          shadowBlur: 6,
          shadowColor: 'rgba(123, 154, 204, 0.5)',
          shadowOffsetX: 0, // 阴影偏移x轴多少
          shadowOffsetY: 0 // 阴影偏移y轴多少
        },
        // 显示的label的格式化器
        // 20050101 变为 2005\n0101
        labelFormatter: function (index, value) {
          const year = value.slice(0, 4);
          const date = value.slice(4);
          return year + '\n' + date;
        },
        textStyle: {
          fontStyle: 'italic' // 设置字体倾斜
        },
        showDataShadow: false // 隐藏数据阴影
      }
    ]

思路:

  1. showDataShadow: false // 隐藏数据阴影
    是把数据预览去掉
  2. 移动端不太方便,所以把按钮进行了修改方便用户拖拽。
js 复制代码
        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
        handleSize: '200%', // 放大按钮
        borderColor: 'none',
        handleStyle: {
          color: '#BFCCE3',
          shadowBlur: 6,
          shadowColor: 'rgba(123, 154, 204, 0.5)',
          shadowOffsetX: 0, // 阴影偏移x轴多少
          shadowOffsetY: 0 // 阴影偏移y轴多少
        },
  1. 因为 日期格式是 YYYYMMDD, 手机上显示太长了,这里做了换行处理。
js 复制代码
        // 显示的label的格式化器
        // 20050101 变为 2005\n0101
        labelFormatter: function (index, value) {
          const year = value.slice(0, 4);
          const date = value.slice(4);
          return year + '\n' + date;
        },
这里有个坑:labelFormatter

labelFormatter官网说,value在type 为 'category'的时候,是索引值。

但我实际看到的效果不是。

比如我有7000个数据点,每次拖拽的时候,索引index只有200多个,导致我获取不到数据。

因为只想拖拽的时候,格式化显示的label,第二个参数就是当时显示的label,但是文档里没有标出来。
https://echarts.apache.org/zh/option.html#dataZoom-slider.labelFormatter

相关推荐
雪落满地香9 分钟前
css:圆角边框渐变色
前端·css
风无雨2 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!2 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~6 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧7 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员7 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪7 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya7 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81637 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef067 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek