【echarts】自定义dataZoom样式

最新推荐文章于 2024-09-05 17:08:51 发布

String佳佳

最新推荐文章于 2024-09-05 17:08:51 发布

阅读量1.2k

点赞数

分类专栏： Echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44171757/article/details/129746622

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

实现方法

//引入左右两侧的拖动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,
      },
    ],
    ...
}