Vue ECharts 动态设置多y轴相同的最大值（包含是否连接空数据，统一的最大值向上取整，强制设置坐标轴分割间隔，设置每条y轴的index）- 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

效果

一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、tips：

（1）向上取整max，Math.ceil搭配Math.max。

​编辑

（2）max、min、interval这三个配置项都必须设置，否则达不到效果。

（3）设置每个y轴的index，需要与series的顺序一致，否则会出现顺序错乱的问题，影响美观。

四、完整示例

---

效果

一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<template>
  <div id="main"></div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: "mutiYAxis",
    data() {
      return {
     
      };
    },
    methods: {
      initChart() {
        let data = this.data
        let chartDom = document.getElementById("main");
        let myChart = echarts.init(chartDom);
        let option;

        ...详见完整示例   
      },
    },
  };
</script>

<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

3、tips：

（1）向上取整max，Math.ceil搭配Math.max。

（2）max、min、interval这三个配置项都必须设置，否则达不到效果。

 interval: number

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。

Documentation - Apache ECharts

（3）设置每个y轴的index，需要与series的顺序一致，否则会出现顺序错乱的问题，影响美观。

四、完整示例

<template>
  <div id="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "mutiYAxis",
  data() {
    return {
      data: [
        {
          "time": "Jan",
          "evaporation": "2.6",
          "precipitation": "3",
          "realEvaporation": "2.8",
          "realPrecipitation": "3.6"
        },
        {
          "time": "Feb",
          "evaporation": "92.62",
          "precipitation": "100",
          "realEvaporation": "106.5",
          "realPrecipitation": "120"
        },
        {
          "time": "Mar",
          "evaporation": "114.83",
          "precipitation": "128.57",
          "realEvaporation": "150",
          "realPrecipitation": "166.46"
        },
        {
          "time": "Apr",
          "evaporation": "62.26",
          "precipitation": "69.39",
          "realEvaporation": "94.7",
          "realPrecipitation": "72.9"
        },
        {
          "time": "May",
          "evaporation": "9.92",
          "precipitation": "10.22",
          "realEvaporation": "10.62",
          "realPrecipitation": "13.52"
        },
        {
          "time": "Jun",
          "evaporation": "20",
          "precipitation": "25.08",
          "realEvaporation": "26.8",
          "realPrecipitation": "32"
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let data = this.data
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      let xAxisData = [];
      let series = [];
      let yAxis = [];

      let _yAxisEvaporationData = [],
        _yAxisPrecipitationData = [],
        _yAxisRealEvaporationData = [],
        _yAxisRealPrecipitationData = [];
      
      if(data.length === 0) return false;
      data.forEach((_series) => {
        xAxisData.push(_series.time);
        _yAxisEvaporationData.push(Math.round(_series.evaporation));
        _yAxisPrecipitationData.push(Math.round(_series.precipitation));
        _yAxisRealPrecipitationData.push(Math.round(_series.realPrecipitation));
        _yAxisRealEvaporationData.push(Math.round(_series.realEvaporation));
      });

      let maxArr = [Math.max(..._yAxisEvaporationData), Math.max(..._yAxisPrecipitationData), Math.max(..._yAxisRealPrecipitationData), Math.max(..._yAxisRealEvaporationData)];
      this.yMax = Math.ceil(Math.max(...maxArr) / 10) * 10;
      
      let yAxisEvaporation = this.handleYAxis('预测蒸发量(ml)', 'left', '#5470c6', this.yMax, 35, 80);
      let yAxisPrecipitation = this.handleYAxis('预测降水量(ml)', 'left', '#91cc75', this.yMax);
      let yAxisRealPrecipitation = this.handleYAxis('实际降水量(ml)', 'right', '#fac858', this.yMax);
      let yAxisRealEvaporation = this.handleYAxis('实际蒸发量(ml)', 'right', '#ee6666', this.yMax, 35, 80);

      let _yAxisEvaporationSeries = this.handleSeries('预测蒸发量', 0, '#5470c6', _yAxisEvaporationData);
      let _yAxisPrecipitationSeries = this.handleSeries('预测降水量', 1, '#91cc75', _yAxisPrecipitationData);
      let _yAxisRealPrecipitationSeries = this.handleSeries('实际降水量', 3, '#fac858', _yAxisRealEvaporationData);
      let _yAxisRealEvaporationSeries = this.handleSeries('实际蒸发量', 2, '#ee6666', _yAxisRealPrecipitationData);

      series = [{..._yAxisEvaporationSeries}, {..._yAxisPrecipitationSeries}, {..._yAxisRealPrecipitationSeries}, {..._yAxisRealEvaporationSeries}];

      yAxis = [{...yAxisEvaporation}, {...yAxisPrecipitation}, {...yAxisRealPrecipitation}, {...yAxisRealEvaporation}];
      option = {
        grid: {
          top: '15%',
          left: '15%',
          right: '15%',
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let result = params[0].axisValueLabel;
            for (let i = 0; i < params.length; i++) {
              let param = params[i];
              result += '<br/>' + param.marker + param.seriesName + '  ' + param.value + 'ml';
            }
            return result;
          },
        },
        legend: {
          type: 'scroll',
          data: ['预测蒸发量', '预测降水量', '实际降水量', '实际蒸发量'],
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: xAxisData,
          },
        ],
        yAxis,
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        series,
      };

      option && myChart.setOption(option);
    },
    handleYAxis(name, position, color, max, nameGap = 15, offset = 0) {
      return {
        type: 'value',
        name: name,
        nameGap: nameGap,
        offset: offset,
        position: position,
        alignTicks: true,
        max: max,
        min: 0,
        interval: Math.ceil(max / 5),
        nameTextStyle: {
          fontSize: 14,
          fontcolor: '#fff',
          fontWeight: 'bolder',
        },
        splitLine: { show: false },
        axisLabel: {
          formatter: '{value} ml',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: color,
          }
        },
      };
    },
    handleSeries(name, yAxisIndex, color, data) {
      return  {
        name: name,
        type: 'line',
        yAxisIndex: yAxisIndex,
        smooth: true,
        showAllSymbol: false,
        symbol: 'emptyCircle',
        itemStyle: {
          normal: {
            color: color,
            lineStyle: {
              color: color,
            },
          },
        },
        data: data,
        connectNulls: false, // 是否连接空数据
      }
    }
  },
};
</script>

<style scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

 欢迎扫码下方二维码关注VX公众号