SpringBoot+Vue+Echarts实现多条折线图

先上效果图

后端

项目需求：从txt文件中读取数据，然后前端进行展示。

后端根据需要返回数据，可以将需要显示的数据封装为一个类，例如横坐标为时间，纵坐标为时延，这样就可以将时间和时延封装为一个类，向前端返回该类的list集合。

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DataVis {
    private String second; // 当前秒      X轴数据
    private String delay;  // 时延        Y轴数据
}

@RequestMapping("/getData")
public List<DataVis> getData(String path){   // 前端传来一个文件名
    String realPath = "async"+"\\"+path;     // 拼接为实际路径
    String[][] strings = DataHandler.get(realPath); // 这块是调用自己写的函数,实际就是从txt中读取数据,返回多行两列的数组
    List<DataVis> dataVisList = new ArrayList<>();
    for (String[] string : strings) {  // 每一行实现一个对象,最后返回对象列表
        DataVis dataVis = new DataVis();
        dataVis.setSecond(string[0]);
        dataVis.setDelay(string[1]);
        dataVisList.add(dataVis);
    }
    return dataVisList;
}

前端

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        侧边栏
      </el-aside>
      <el-main>
        <div id="myChart1" :style="{width:'100%',height:'600px'}"> </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import * as $echarts from 'echarts';
import axios from "axios";

export default {
  name: "timeData",
  data() {
    return {
      chart1: '',
    }
  },
  mounted() {
    this.drawLine1();
    this.initData();
  },
  methods: {
    async initData() {
      const second45 = [];
      const delay45 = [];
      let formData= new FormData();
      formData.append("path","result1.txt"); // 往后端传需要解析的文件,这是本项目需要的,实际可以不传参数
      await axios.post("/getData",formData).then(res => { // 接收返回值,因为返回的是
        for (let re of res.data){
          second45.push(re.second);
          delay45.push(re.delay);
        }
      });
      const secondSend = [];
      const delaySend = [];
      let formData1= new FormData();
      formData1.append("path","result2.txt");
      await axios.post("/getData",formData1).then(res => {
        for (let re of res.data){
          secondSend.push(re.second);
          delaySend.push(re.delay);
        }
      });
      const secondServer = [];
      const delayServer = [];
      let formData2= new FormData();
      formData2.append("path","result3.txt");
      await axios.post("/getData",formData2).then(res => {
        for (let re of res.data){
          secondServer.push(re.second);
          delayServer.push(re.delay);
        }
      });
      this.chart1.setOption({
        xAxis: {                // X轴
          data: second45,       // X轴的数据,是一个数组
          name: '时间(秒)',     // X轴名字 字体颜色和大小
          nameTextStyle: {     
            color: '#0e9e9e',
            fontSize: 10,
          },
          axisLabel: {         // X轴刻度值的颜色和大小
            show: true,
            textStyle: {
              color: '#0e9e9e',
              fontSize: 15,
            },
            //解决横坐标自动隐藏问题
            // interval: 0
          }
        },
        yAxis: {        
          type: 'value',
          name: '数据包(个)',     // Y轴的名字 字体颜色和大小
          nameTextStyle: {
            color: '#0e9e9e',
            fontSize: 15,
          },
          axisLabel: {            // Y轴刻度的颜色和大小
            show: true,
            textStyle: {
              color: '#0e9e9e',
              fontSize: 15,
            },
          }
        },
        series: [           // Y轴的数据
          {
            name: '45端口',  // 每一个是一个Y轴的折线
            type: 'line',
            stack: 'Total',
            data: count45   // 对应的数据数组
          },
          {
            name: '发送端',
            type: 'line',
            stack: 'Total',
            data: countSend
          },
          {
            name: '服务端',
            type: 'line',
            stack: 'Total',
            data: countServer
          },
        ]
      });
    },
    drawLine1() {
      this.chart1 = $echarts.init(document.getElementById('myChart1'));
      let option = {
        title: {               // 标题名称
          text: '时间数据包图',
          textStyle: {
            fontSize: 20,
            color: '#009229',
          },
          left: 'right'
        },
        tooltip: {
          trigger: 'axis'
        },
        color: ['#ff4141','#69fa20','#2c3f6d'],  // Y轴折线的颜色,与legend的data数据相匹配
        legend: {
          data: ['45端口', '发送端', '服务端'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        animation: true,           // 是否展示动画
        animationDuration: 20000,  // 动画时长  单位毫秒  此处设为20秒完成数据展示
        series: [{}]
      };
      this.chart1.setOption(option);
    },
  }
}
</script>

<style scoped>

</style>