【echarts】自定义dataZoom样式

效果图

实现方法

//引入左右两侧的拖动icon-蓝色的圆环图标
import echartsHandIcon from "@/assets/images/echarts-icon.png";

option = {
	...
	dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: "8%",
        start: 0,
        end: 100,
        handleIcon: "image://" + echartsHandIcon,
        handleSize: "160%",
        textStyle: {
          color: "#939FAE",
        },
        borderColor: "#F3F5F9",
        fillerColor: "#C2DAFC",
      },
      {
        type: "inside",
        start: 0,
        end: 100,
      },
    ],
    ...
}