echarts dataZoom使用

最新推荐文章于 2024-06-19 15:55:14 发布

qq_39664116

最新推荐文章于 2024-06-19 15:55:14 发布

阅读量1k

点赞数

分类专栏：学习记录文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_39664116/article/details/132055736

版权

学习记录专栏收录该内容

12 篇文章 0 订阅

订阅专栏

##1. echart横向柱状图滚动条从顶部开始

 dataZoom: [
      {
        id: 'dataZoomY',
        yAxisIndex: [0, 1],
        show: true, // 是否显示滑动条，不影响使用
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        start: 100, // 默认显示0%
        width: 6,
        borderColor: 'green',
        // borderColor: 'transparent',
        fillerColor: '#ebeef5',
        zoomLock: true,
        showDataShadow: false, // 是否显示数据阴影 默认auto
        backgroundColor: 'red',
        // backgroundColor: '#fff',
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        realtime: true, // 是否实时更新
        filterMode: 'filter',
        handleIcon: 'circle',
        handleStyle: {
          color: '#ebeef5',
          borderColor: '#ebeef5',
        },
        handleSize: '80%',
        moveHandleSize: 0,
        maxValueSpan: 10,
        minValueSpan: 10,
        brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
      },
      {
        type: 'inside',
        yAxisIndex: [0, 1],
        start: 0, // 默认显示0%
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true,
      },
    ],

##1. echart纵向柱状图滚动条从顶部开始

 dataZoom: [
        {
          type: "slider",
          height: 10,
          textStyle: {
            fontSize: 12,
            color: "#2A2A2A" // 滚动条两边字体样式
          },
          show: gdwzjrlqkTableData.data.length > 18 ? true : false,
          xAxisIndex: [0],
          showDetail: false,
          bottom: 0,
          // fillerColor: "rgba(28, 114, 219, 0.93)",
          handleStyle: {
            color: "#17B9FF"
          },
          left: 20,
          right: 20,
          startValue: 0, //  初始显示值
          endValue: 18, //  结束显示值
          zoomLock: true,
          brushSelect: false
        },
        {
          type: "inside",
          height: 10,
          show: true,
          xAxisIndex: [0],
          start: 1, // 默认为1
          end: 100, // 默认为100
          zoomOnMouseWheel: false, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
          moveOnMouseMove: true,
          moveOnMouseWheel: true // 鼠标滚轮实现移动
        }
      ]