动态设置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) { // 动态设置分割间隔算法,使柱形图分割和显示更合理
            return setMax.call(this, value, 2000)
          }.bind(this) // 通过bind实现this的绑定,关键点
     

你可能感兴趣的:(ECharts)