echarts图的数据过多设置dataZoom属性

草莓味的代码

已于 2023-05-22 17:17:37 修改

阅读量2.7k

点赞数 4

文章标签： echarts 前端 javascript

于 2023-02-21 19:26:03 首次发布

本文链接：https://blog.csdn.net/qq_52721978/article/details/129148443

版权

dataZoom样式修改数据不堆积和滚动条差不多的

 dataZoom: [
          {
            type: "slider",
            show: true, //显示滚动条

            bottom: 20,
            showDataShadow: false, //是否显示数据阴影 默认auto
            borderColor: "transparent", //边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
            height: 10, //滚动条高度
            showDetail: false, //关闭：拖拽时候显示详细数值信息。
            fillerColor: "rgba(221, 225, 229, 1)", //滚动条颜色
            filterMode: "filter",
            realtime: true, //实时更新
            handleStyle: {
              borderWidth: 0,
              color: "rgba(221, 225, 229, 1)",
            }, //SVG图形填充颜色
            textStyle: {
              color: "transparent",
            },
            handleIcon:
              "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z", //直接画一个圆形SVG矢量路径
            startValue: -6, // 重点在这   -- 开始的值
            endValue: -1, // 重点在这   -- 结束的值
            dataBackground: {
              lineStyle: {
                opacity: 0,
              },
              areaStyle: {
                opacity: 0,
              },
            },
            
         brushSelect: false,
            selectedDataBackground: {
              lineStyle: {
                opacity: 0,
              },
              areaStyle: {
                opacity: 0,
              },
              brushStyle: {
                borderColor: "#f00",
              },
            },
          },
          {
            type: "inside", //滚动条内置在坐标系中
            xAxisIndex: [0],
            startValue: -6, // 重点在这   -- 开始的值
            endValue: -1, // 重点在这   -- 结束的值
          },
        ],

dataZoom样式修改数据堆积数据的

  dataZoom: [
          {
            type: "slider",
            show: true, //显示滚动条
            // xAxisIndex: [0],
            bottom: 20,
            showDataShadow: false, //是否显示数据阴影 默认auto
            borderColor: "transparent", //边框和背景颜色一致，（因为无法做到无边框，只能跟随页面背景）
            height: 10, //滚动条高度
            showDetail: false, //关闭：拖拽时候显示详细数值信息。
            fillerColor: "rgba(221, 225, 229, 1)", //滚动条颜色
            filterMode: "filter",
            realtime: true, //实时更新
            handleStyle: {
              borderWidth: 0,
              color: "rgba(221, 225, 229, 1)",
            }, //SVG图形填充颜色
            textStyle: {
              color: "transparent",
            },
            handleIcon:
              "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z", //直接画一个圆形SVG矢量路径
            startValue: -6, // 重点在这   -- 开始的值
            endValue: -2, // 重点在这   -- 结束的值
            dataBackground: {
              lineStyle: {
                opacity: 0,
              },
              areaStyle: {
                opacity: 0,
              },
            },
        //  moveHandleIcon: 'none',
        //  handleIcon: 'none',
        //  zoomLock: true,
        //  zoomOnMouseWheel: false,
         brushSelect: false, // 滚动条上面的阴影
            selectedDataBackground: {
              lineStyle: {
                opacity: 0,
              },
              areaStyle: {
                opacity: 0,
              },
              brushStyle: {
                borderColor: "#f00",
              },
            },
          },
          {
            type: "inside", //滚动条内置在坐标系中
            xAxisIndex: [0],
            startValue: -6, // 重点在这   -- 开始的值
            endValue: -2, // 重点在这   -- 结束的值
          },
        ],