echarts实现左右滑动

1.内置滑动

 dataZoom: [
          {
            type: "inside", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            start: 50,
            end: 100,
          },
        ]

2.底部有滑动块

 dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: true,
            backgroundColor: "#262626" , //组件的背景颜色
            height: 18,
            xAxisIndex: 0,
            bottom: 10,
            start: 80,
            end: 100,
            handleSize: 18,
            minSpan: 8,//最小滑动距离
            handleIcon: "",
            showDetail: false,
            filterMode: "filter",
            borderColor: "#262626" //边框颜色
            fillerColor:"#182434" , //选中范围背景色
            backgroundColor:"#262626" , //背景颜色
            moveOnMouseMove: true,
            dataBackground: {
              lineStyle: {
                color:"red",
              },
              areaStyle: {
                color:"#121212" ,
              },
            },
            selectedDataBackground: {
              lineStyle: {
                color: "#green",
              },
              areaStyle: {
                color: "#fff",
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 10,
              },
            },
            handleSize: 30,
            handleSize: "130%", // 手柄大小
            // 用于画手柄
            handleIcon:
              // "M0,0 v9.7h5 v-9.7h-5 Z", // 画一个长方形
              "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", // 画一个圆形
            handleStyle: {
              color: "#999",
              global: true, // 缺省为 false
              shadowBlur: 6,
              shadowColor: "rgba(123, 154, 204, 0.5)",
              shadowOffsetX: 0, // 阴影偏移x轴多少
              shadowOffsetY: 0, // 阴影偏移y轴多少
            },
          },
        ],