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: '无数据无法生成图表!'
              });
          }
      },

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

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值