echarts实现动态y轴范围且平均等分辅助线

作者: 印子_cfbb | 来源:发表于2021-03-26 23:11 被阅读0次

导语，一堆废话

用echarts绘制走势图时，你是否也有这样的烦恼，数据的值普遍较大，但是数据间的差值却微乎其微，此时默认生成的走势图就偏向于一条直线，根本没有参考意义。
那有啥方法可以使得y轴范围随数据变化，数据线永远在图标的中间范围显示，辅助线又能均等分呢。
max+min+interval的方式就能轻松解决该问题，到时候无论是数据一会是0.003还是3000，你都不用担心如何处理图表范围的问题。

最终效果

最终效果.png

正文

首先我们还是先去官网考一个基础折线图表

1-基础折线图.png
给折线图加点自己的数据，和自己喜欢的样式（体现问题）
数据相差不到1，但数据普遍大于100时，走势图就趋于一条直线，且偏上，体现不出来数据的变化。体现不了数据变化的走势图没有意义。

2-增加数据和样式.png

let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此处为处理x轴值向中间靠拢，且不被截断，请不要随意修改空格个数
dateList[0] = '                 ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + '                   ';
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
option = {
    xAxis: {
        type: 'category',
        data:dateList,
         axisLabel: {
          // 此处为处理x轴值只显示第一个和最后一个日期
          interval: dateList.length - 2,
          textStyle: {
            color: '#999',//坐标值得具体的颜色

          }
        },
        axisLine: {
          show: false,//x轴线隐藏
          fontSize: 12,
        },
        axisTick: {
          show: false,//隐藏x轴的标点
        },
    },
    yAxis: {
        type: 'value',
         axisLabel: {
          textStyle: {
            color: '#999',

          },
          interval: 'auto',
          formatter: function (value, index) {
           return value.toFixed(2) + '%';
          }
        },
        // 显示分隔线
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#ccc'],
            width: 1,
            type: 'solid'
          }
        },
    },
    series: [{
        data: dataList,
        type: 'line',
        symbol: 'circle',
        symbolSize: 4,
        itemStyle: {
          color: '#fb563a'
        },
        // 渐变色填充
        areaStyle: {
          // origin设置填充起始位置，auto默认y=0开始,start则从min处开始
          origin: 'start',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#fb563a' // 0% 处的颜色
            }, {
              offset: 1, color: '#fff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
    }]
};

计算y轴的范围
上面的图表因为数值变化太小完全体现不出数据的变化趋势，所以我们应该缩小y轴的范围，并且将数据线集中在图标中部，而不是偏上。
3.1. 首先我习惯应用三分原则，如下
3-1-三分原则.png
所以数据的最大值max与最小值min之差正好要是一份的值，
yMax = max + (max-min)
yMin = min - (max-min)

// 计算数据最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 计算间隔，返回y轴最大值，y轴最小值 ，间隔
let getLeftData = (min, max) => {
    // 控制分隔条数，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
    };
}
let interObj = getLeftData(minValue, maxValue)

3.2. 将计算出的y轴范围应用于echarts
使用yAxis属性下的min和max可以设置范围

       yAxis: {
        type: 'value',
        // 设置y轴最大值
        min: interObj.min,
        // 设置y轴最小值
        max: interObj.max,
        ...
    },

3-2-设置了y轴范围.png

辅助线平分
现在的图表还存在辅助线不平分的问题，可以看到图表中部的辅助线是平分的，但是y轴最大值和最小值上的辅助线的出现使得上下边缘的辅助线间隔偏小。

4-边缘辅助线.png

4.1. 利用splitNumber（无效）
splitNumber:'5'
添加该属性没有效果，是因为我们设置了y轴的max和min，所以splitNumber不起作用
4.2. 使用interval去分隔
interval该方式是通过按设置的值去切割轴，如y轴的interval设置为100，则会将y轴按每份间隔100去分割
故，我们修改一下方法getLeftData 去获取分隔间隔值

...
let getLeftData = (min, max) => {
    // 控制分隔条数，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
      // 分割成5等份 
      interval: (max + diff - (min - diff)) / 5,
    };
}
let interObj = getLeftData(minValue, maxValue)
option = {
   ...
    yAxis: {
        type: 'value',
        // 设置y轴间隔线
        interval:interObj.interval,
        // 设置y轴最大值
        min: interObj.min,
        // 设置y轴最小值
        max: interObj.max,
       ...
    },
    ....
};

4-2-interval设置间隔.png

完整代码



// 准备日期数据
let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此处为处理x轴值向中间靠拢，且不被截断，请不要随意修改空格个数
dateList[0] = '                 ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + '                   ';
// 准备数值数据
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
// let dataList= ["10.934", "10.935", "10.936", "10.937", "10.938", "10.939", "10.940", "10.941", "10.942", "10.942", "10.943", "10.944", "10.944", "10.945", "10.946", "10.947", "10.948", "10.949", "10.950", "10.950", "10.951", "10.952", "10.953", "10.954", "10.955", "10.955", "10.949"]
// let dataList= ["0.10934", "0.10935", "0.10936", "0.10937", "0.10938", "0.10939", "0.10940", "0.10941", "0.10942", "0.10942", "0.10943", "0.10944", "0.10944", "0.10945", "0.10946", "0.10947", "0.10948", "0.10949", "0.10950", "0.10950", "0.10951", "0.10952", "0.10953", "0.10954", "0.10955", "0.10955", "0.10949"]
// 计算数据最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 计算间隔，返回y轴最大值，y轴最小值 ，间隔
let getLeftData = (min, max) => {
    // 控制分隔条数，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
      // 分割成5等份 
      interval: (max + diff - (min - diff)) / 5,
    };
}
let interObj = getLeftData(minValue, maxValue)

option = {
    xAxis: {
        type: 'category',
        data:dateList,
         axisLabel: {
          // 此处为处理x轴值只显示第一个和最后一个日期
          interval: dateList.length - 2,
          textStyle: {
            color: '#999',//坐标值得具体的颜色

          }
        },
        axisLine: {
          show: false,//x轴线隐藏
          fontSize: 12,
        },
        axisTick: {
          show: false,//隐藏x轴的标点
        },
    },
    yAxis: {
        type: 'value',
        // 设置y轴间隔
        interval:interObj.interval,
        // 设置y轴最大值
        min: interObj.min,
        // 设置y轴最小值
        max: interObj.max,
        axisLabel: {
          textStyle: {
            color: '#999',
          },
          interval: 'auto',
          formatter: function (value, index) {
           return value.toFixed(2) + '%';
          }
        },
        // 显示分隔线
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#ccc'],
            width: 1,
            type: 'solid'
          }
        },
    },
    series: [{
        data: dataList,
        type: 'line',
        symbol: 'circle',
        symbolSize: 4,
        itemStyle: {
          color: '#fb563a'
        },
        // 渐变色填充
        areaStyle: {
          // origin设置填充起始位置，auto默认y=0开始,start则从min处开始
          origin: 'start',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#fb563a' // 0% 处的颜色
            }, {
              offset: 1, color: '#fff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
    }]
};

echarts实现动态y轴范围且平均等分辅助线

导语，一堆废话

最终效果

正文

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue