echarts 折线图实现 多条折线 （大数据量面积图修改而来）

需求

        通过图表展示某一对象的不同类别在不同时间的的属性值变化。原本是选择了 ”折线图堆叠“的示例来的，发现实现不了，因为需求是不同时间。所以后来选择了大数据量面积图，加以更改实现需求。

直接上效果图（这里将样式修改为折线图）

官方实例：https://echarts.apache.org/examples/zh/editor.html?c=area-simple

 （此篇以学生张三和李四为例）

1.html部分 

<template>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="main" 
        style="width: 924px;
        height: 500px;
        margin-left: 150px;
        margin-top:20px;" >
      </div>
</template>

2.data部分 

 data() {
    return {
       //拿到的元数据
        data:[
        {
          class:'5班',//班级
          name:'张三',//名称
          time:1,//日期，例如1号
          weight:130//体重
        },
        {
          class:'5班',
          name:'张三',
          time:3,
          weight:132
        },
        {
          class:'5班',
          name:'张三',
          time:5,
          weight:134
        },
        {
          class:'5班',
          name:'张三',
          time:7,
          weight:136
        },
        {
          class:'5班',
          name:'李四',
          time:2,
          weight:140
        },
        {
          class:'5班',
          name:'李四',
          time:4,
          weight:142
        },
        {
          class:'5班',
          name:'李四',
          time:6,
          weight:144
        },
        {
          class:'5班',
          name:'李四',
          time:8,
          weight:146
        },
      ],
      data1:[],//中间数组，用于存放需要的数据
      student:{
        class:'',
        name:'',
        time:'',
        weight:''
      }
    }
 }

3.将data转换成echarts需要的数据结构（js部分）

//图表显示
      showChart(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            legend: {
                data: []
            },
            title: {
                //left: 'center',
                text: '5班 · 各学生体重变化',
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 100
            }, {
                start: 0,
                end: 10
            }],
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                name:'日',
                type: 'value',
                boundaryGap: false
            },
            yAxis: {
                name:'体重',
                type: 'value',
                boundaryGap: [0, '100%']
            },
            series: []
        };
        var a = 0
        var b = 0
        //定义data1
        this.data1 = [a,b]
        if(this.data.length > 0){
          for (let i = 0; i < this.data.length; i++) {
            //在数组中找到符合条件的第一个元素，返回该元素
            var found = option.series.find(element => this.data[i].name == element.name);
            if(typeof found == "undefined"){//此处为了避免下面if里面的found.name报未定义
              found = {
                name :'我是测试学生名字'//给一个基本不会有的数据就行
              }
            }
            if(this.data[i].name == found.name){//如果series数组中有data当前对象的学生名称，直接添加
                this.data1 = [a,b]
                this.data1[0] = this.data[i].time
                this.data1[1] = this.data[i].weight
                found.data.push(this.data1)
            }else{//如果没有，就新push一个series元素,此处要注意series数据结构理解
              option.series.push(
                {
                    name: this.data[i].name,
                    type: 'line',
                    data: []
                }
              )
              //添加图表正上方元素，也就是该图表所要展示的的多条曲线各自的名称
              option.legend.data.push(this.data[i].name)
              this.data1 = [a,b]
              //重复上面if里面的内容
              var sFound = option.series.find(element => this.data[i].name== element.name);
              this.data1[0] = this.data[i].time
              this.data1[1] = this.data[i].weight
              sFound.data.push(this.data1)
            }
          }
          myChart.setOption(option,true);
          }else{
            this.$message({
                type: 'warning',
                message: '无数据无法生成图表!'
              });
          }
      },

        本人新手一枚，如果文中有写错或者说错的地方，还望大家指出，也欢迎大家一起探讨，一起学习，一起分享！