Vue Echarts 多折线图只有一条X轴（合并X轴数据并去重排序） - 附完整示例

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

目录

效果

一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

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

3、数据处理（关键点）

四、完整示例

tips

---

效果

一、介绍

 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、指定容器并设置容器宽高

3、数据处理（关键点）

      let xAxisData = [];
      let series = [];
      let index = 1;
      let seriesNames = [];
      let seriesUnit = [];
      let yAxis = [];
      let timeData = [];

      data.sort(this.sortByLength);
      data.forEach((_series, i) => {
        let _yAxis = [];
        let arrEle = [];
        let nameUnit = '';
        _series.unit ? (nameUnit = '(' + _series.unit + ')') : (nameUnit = '');
        _series.dataList.forEach((item) => {
          let { value, time } = item;
          timeData.push(time);
          arrEle = [time, value];
          _yAxis.push(arrEle);
        });

        seriesNames.push(_series.seriesName);
        seriesUnit.push(_series.unit);
        if (yAxis.length < 2) {
          yAxis.push({
            name: _series.seriesName + nameUnit,
            nameTextStyle: {
              fontSize: 14,
              fontcolor: '#fff',
              fontWeight: 'bolder',
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value} ',
            },
          });
        }
        let _item = {
          name: _series.seriesName,
          type: 'line',
          smooth: true,
          showAllSymbol: false,
          symbol: 'emptyCircle',
          data: _yAxis,
          connectNulls: true,
        };
        if (index == 2) {
          _item.yAxisIndex = 1;
        }

        series.push(_item);
        index++;
      });

      xAxisData = this.sortByTime(timeData);

注：部分方法的完整版在完整示例展示

四、完整示例

tips

1、X轴的数据一定要合并去重并排序

2、series的数据格式一定是数组嵌套数组