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

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

echarts实现动态y轴范围且平均等分辅助线
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成
Echarts和highCharts图表使用总结(附AntV)
echarts 坐标轴两侧留白 boundrygap
02-Echarts-柱状图和通用配置
Echarts双Y轴刻度分割线对不齐问题
echarts：折线图横坐标内容过长省略显示
ReactNative Echarts实现隐藏x轴，y轴，刻度线
eCharts 使用笔记
修改echarts正负坐标条形图的基准值

导语，一堆废话

用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轴范围且平均等分辅助线
导语，一堆废话用echarts绘制走势图时，你是否也有这样的烦恼，数据的值普遍较大，但是数据间的差值却微乎其微，...
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图本来使用的是wxcharts，但发现实现不了...
Echarts和highCharts图表使用总结(附AntV)
Echarts: 1.给y轴上间隔线设置成虚线 2.echarts的x轴和y轴都隐藏 3.设置图表的上下间隔线是实...
echarts 坐标轴两侧留白 boundrygap
echarts中boundaryGap属性 boundaryGap:false 调整y轴
02-Echarts-柱状图和通用配置
Echarts-柱状图步骤1 ECharts 最基本的代码结构步骤2 准备x轴的数据步骤3 准备 y 轴的数...
Echarts双Y轴刻度分割线对不齐问题
Echarts双Y轴刻度分割线对不齐问题已发布Echarts社区点击查看[https://www.makeapi...
echarts：折线图横坐标内容过长省略显示
背景在画echarts图时，可能会出现X轴或Y轴的标题过长的显示问题解决 PS.这里是折线图的X轴数据，Y轴同...
ReactNative Echarts实现隐藏x轴，y轴，刻度线
eCharts 使用笔记
配置网格距离canvase外层盒子距离 X轴设置 Y轴 series设置内容区域收藏网站 echarts回调...
修改echarts正负坐标条形图的基准值
最近在项目中需要用echarts的柱状图实现一个效果，当值高于平均值时，柱子在x轴的上面，反之，当值低于平均值时，...