echarts 柱状图和折线图 组合图表的Y轴刻度错乱优化

图表现状

ps：我们将y轴的最大值、最小值、间距不设置的时候，图表会自动分配，数据不规律的时候就会出现如上图的样子，测试同学会让你优化一下（狗头）

优化

ps：以为vue2为例

1.现在data里声明 min（最小值） max（最大值） interval（间距大小）、splitNumber（间距数量）

// mainVal1、maxVal1、interval1、mainVal1、maxVal2、interval2、splitNumber（5）

2.在请求数据处

// this.ylist1 为柱状数据 
this.maxVal1 = Number(Math.max(...this.ylist1)) // 最大值
this.minVal1 = Number(Math.min(...this.ylist1)) // 最小值
this.interval1 = (this.maxVal1 - this.minVal1) / this.splitNumber

// this.ylist2 为 折线数据
this.maxVal2 = Number(Math.max(...this.ylist2)) // 最大值
this.minVal2 = Number(Math.min(...this.ylist2)) // 最小值
this.interval2 = (this.maxVal2 - this.minVal2) / this.splitNumber

3.图表配置
option = {
       grid: {
          left: '100px',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订单金额', '订单数量'],
        },
        xAxis: [
          {
            type: 'category',
            data: [11/29,11/30], //x轴数据
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '订单金额',
            min: this.minVal1, //柱状图min
            max: this.maxVal1, //柱状图max
            interval: this.interval1, //柱状图间距
            splitNumber: this.splitNumber, //柱状图间距数量
             // 柱状图Y轴刻度显示保留2位小数
            axisLabel: {
              formatter(v) {
                const a = v.toFixed(2)
                const b = `${a}元`
                return b
              },
            },
          },
          {
            type: 'value',
            name: '订单数量',
            min: this.minVal2, //折线图min
            max: this.maxVal2, //折线图max
            interval: this.interval2, //折线图间距
            splitNumber: this.splitNumber , //折线图间距数量
            // 折线图Y轴刻度显示保留整数
            axisLabel: {
              formatter(v) {
                const a = v.toFixed(0)
                const b = `${a}个`
                return b
              },
            },
          },
        ],
        series: [
          {
            name: '订单金额',
            type: 'bar',
            barWidth: '20%',
            tooltip: {
              valueFormatter(value) {
                return value + ' 元'
              },
            },
            data: [0.7,0.1], //柱状图数据
            itemStyle: {
              normal: {
                color: '#6792FF',
              },
            },
          },
          {
            name: '订单数量',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter(value) {
                return value + ' 个'
              },
            },
            data: [4,7], // 折线图数据
            itemStyle: {
              normal: {
                color: '#4AD77A',
              },
            },
          },
        ],
};

优化完如图所示

补充：你的测试同学觉的订单数量本来就是整数，上面的处理还是不准确，要求刻度向上取整

    // interval2 订单间隔  maxVal2 订单max minVal1 订单min
    
    const peak = Number(Math.max(...this.ylist2))
    this.interval2 = Math.ceil((peak-this.minVal1) / this.splitNumber)
    this.maxVal2 = this.interval2 * this.splitNumber