echarts 当数据过多时,我们使用dataZoom来进行缩放,但是因为数据差距过大而不显示比较大的数据的解决方法

1、横向缩放

[{
		"type": 'slider',
		"realtime": true,
		"start": 0,
		"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
		"height": 10, //组件高度
		"left": 0, //左边的距离
		"right": 5, //右边的距离
		"bottom": 30, //下边的距离
		"show": true, // 是否展示
		"fillerColor": "#D8DEEE", // 滚动条颜色
		"borderColor": "#D8DEEE",
		"zoomLock": true,
		"fillerMode": 'filler',
		"showDetail": false,
		"brushSelect": false,
		"dataBackground": {
			"areaStyle": {
				"color": '#F2F7FF'
			}
		}
	},
	{
		"type": "inside", // 支持内部鼠标滚动平移
		"start": 0,
		"show": true,
		"zoomLock": true,//开启 就是禁止滚轮缩放
		"end": 100 - 1500,
		"xAxisIndex": [0]//数据差距大不显示的解决
	}
]

2.纵向缩放

[{
		"type": 'slider',
		"realtime": true,
		"start": 0,
		"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
		// "height": 5, //组件高度
		"width": 10,
		"left": 3, //左边的距离
		"show": true, // 是否展示
		"fillerColor": "rgba(17, 100, 210, 0.42)", // 滚动条颜色
		"borderColor": "rgba(17, 100, 210, 0.12)",
		"showDetail": false, //拖拽时是否展示滚动条两侧的文字
		"zoomLock": true, //是否只平移不缩放
		"moveOnMouseMove": false, //鼠标移动能触发数据窗口平移
		"zoomOnMouseWheel": false, //鼠标移动能触发数据窗口缩放
		"yAxisIndex": [0],
		"dataZoom-slider": {
			"orient": 'vertical'
		},
		"show": true, // 是否展示
		"fillerColor": "#D8DEEE", // 滚动条颜色
		"borderColor": "#D8DEEE",
		// "zoomLock": true,
		"fillerMode": 'filler',
		"brushSelect": false,
		"dataBackground": {
			"areaStyle": {
				"color": '#F2F7FF'
			}
		}
	},
	{
		"type": "inside", // 支持内部鼠标滚动平移
		"start": 0,
		"end": 50,
		"zoomLock": true,
		// "zoomOnMouseWheel": false,  // 关闭滚轮缩放
		// "moveOnMouseWheel": true, // 开启滚轮平移
		// "moveOnMouseMove": true,  // 鼠标移动能触发数据窗口平移 
		"yAxisIndex": [0],//纵向数据差异过大不显示解决
	}
]

总结:设置"yAxisIndex": [0]或者"xAxisIndex": [0]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库,它提供了丰富的图表类型和高度的可定制性,以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器(包括移动设备上的浏览器)以及部分旧版浏览器(如 IE8/9/10/11)中运行,其底层依赖轻量级矢量图形库 ZRender,确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤: ### 关键特性 1. **开源免费**:ECharts 是开源软件,可以免费用于个人和商业项目,无需支付任何费用。 2. **广泛兼容**:支持多种浏览器环境,包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列,保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**:包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等,以及三维可视化组件(通过 ECharts GL 扩展)。 4. **交互性强**:图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能,提升用户对数据的探索和理解能力。 5. **个性化定制**:提供详细的配置选项,允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等,以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**:能够实时接收新数据并动态更新图表,适用于数据流或实时监控场景。 7. **扩展性**:除了核心库外,有 ECharts GL 用于三维和大规模地理数据可视化,以及周边生态工具(如 ECharts-GL、ZRender)增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求,包括: - **基础图表**:折线图、柱状图、散点图、饼图、K线图 - **统计图表**:盒形图 - **地理图表**:地图、热力图、线图 - **关系图表**:关系图、treemap、旭日图 - **多维数据可视化**:平行坐标 - **BI图表**:漏斗图、仪表盘 此外,ECharts 支持图表间的混搭,即在一个图表容器内同时展现多种图表类型,以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下: #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值