需求
通过图表展示某一对象的不同类别在不同时间的的属性值变化。原本是选择了 ”折线图堆叠“的示例来的,发现实现不了,因为需求是不同时间。所以后来选择了大数据量面积图,加以更改实现需求。
直接上效果图(这里将样式修改为折线图)
官方实例: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: '无数据无法生成图表!'
});
}
},
本人新手一枚,如果文中有写错或者说错的地方,还望大家指出,也欢迎大家一起探讨,一起学习,一起分享!