动态设置ECharts坐标轴分割间隔

阅读: 评论:0

动态设置ECharts坐标轴分割间隔

动态设置ECharts坐标轴分割间隔

ECharts很强大,功能很全,但是配置项太多了,查配置项手册进行配置就花费了很多时间。由于统计数据的大小始终在变化因此坐标轴的分割间隔如果写死了就会随着时间的推移变得不太合适,需要动态的根据统计数据来做一个合理的分割间隔设置。

在官方配置手册上并没有提供动态配置分割间隔的方式方法,于是导致了,摸索一两个小时才发现了一种能够动态配置的方法。

这种动态配置的方法的思路是在动态改变max时来通过对象本身属性的调用以改变分割间隔。具体代码如下。

let lineColor = '#EDEDED'
vm.echartsOptions.SurveydKey = { // 查勘要素textStyle: { color: '#666666' }, // 设置全局文字颜色grid: { left: '18.5%', right: '20px' },dataset: {dimensions: ['product', '查勘要素'],source: vm.echartsData.SurveydKey},xAxis: {axisLine: { show: false, lineStyle: { color: lineColor } },splitLine: { lineStyle: { color: lineColor } },splitNumber: 6,// interval: i, // 以2000为分隔大小minInterval: 0,min: 0,max: function (value) { // 动态设置分割间隔算法,使柱形图分割和显示更

本文发布于:2024-01-28 10:50:26,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17064102296891.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:坐标轴   间隔   动态   ECharts
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23