echarts的dataZoom样式

最新推荐文章于 2024-07-02 10:56:50 发布

Koreyoshi·

最新推荐文章于 2024-07-02 10:56:50 发布

阅读量2k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/130195335

版权

echarts 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章介绍了如何在ECharts图表中设置dataZoom组件，特别是针对x轴的slider和inside类型的滚动条。配置项包括start和end值设定、组件样式、实时更新以及过滤模式等，旨在优化数据可视化的交互体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

dataZoom: [//给x轴设置滚动条
	{
	      type: 'slider',//slider表示有滑动块的，inside表示内置的
	      // startValue: 8,//可用于设置开始显示的柱子的长度
	      // endValue: 1,//可用于设置结束显示的柱子的长度
	      start: 0,//默认为0  可设置滚动条从在后进行展示
	      end: 20,//默认为100
	      show: true,
	      xAxisIndex: [0],
	      handleSize: 0,//滑动条的 左右2个滑动条的大小
	      height: 12,//组件高度
	      left: '5%', //左边的距离
	      right: '5%',//右边的距离
	      bottom: -2,//右边的距离
	      borderColor: "#eee",
	      fillerColor: '#E7E7E7',
	      backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
	      showDataShadow: false,//是否显示数据阴影 默认auto
	      showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
	      realtime: true, //是否实时更新
	      filterMode: 'filter',
	      handleStyle: {
	          borderRadius: '20',
	      },
	  },
	  //下面这个属性是里面拖到
	  {
	      type: 'inside',
	      show: true,
	      xAxisIndex: [0],
	      start: 0,//默认为1
	      end: 100,//默认为100
	      moveOnMouseWheel: false,
	      preventDefaultMouseMove: false,
	  },
	],