项目里有个这样的需求
1、根据表格数据(接口返回的)组成echarts折线图表
2、折线图表里,有4条线是固定的。根据表格中的项目,显示折线(有几个项目,就显示几条线,项目的个数是不固定的)
思路
1、根据接口渲染表格
2、创建echarts轮廓
3、创建至少5个数组,从表格中拿到四个固定值(最好遍历填充,免得后期发生变化)存放数组中,拿到时间在组成一个数组,还有其他的变量需要存储
4、因为线条(项目)个数不确定,那么,图表的
实现
1、思路-步骤2创建echarts轮廓
1 2 3 4 | // css里设置echarts样式 <div class="echarts"> <div echarts [options]='option1' style="width: 100%; height: 100%;"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | echarts() { this.option1 = { // 具体有多少线还不确定,这里先设置个颜色数组 color: ['#ff8b00', '#ff8b00', '#fa3312', '#fa3312', '#1890FF', '#2c93f1', '#4bc62d', '#f6c914', '#e56092', '#6cd4c9', '#5f9ce7', '#c599ca', '#f4989d', '#Oeaabc', '#7fc3e6', ], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, legend: { itemHeight: '5', // data不写的情况的,会根据series里的name自动生成,因此这里不能写死 // data: ['预警值上限', '亚安全上限', '亚安全下限', '预警值下限', '测值'] }, // 时间数组值放到这里 xAxis: { type: 'category', data: this.timeList, axisPointer: { type: 'shadow' }, axisTick: { show: false, }, }, yAxis: [ { type: 'value', axisLabel: { show: true, textStyle: { color: 'black', } }, axisTick: { show: false, }, } ], // 重点:这里要写成动态的,因为值是不确定的 series: this.arrays }; } |
2、思路-步骤3创建数组
接口获取数据,并渲染到html(略)
写第一步的思路
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // 项目名称(这个用来存储动态的线有几条) this.checkPointList = []; // 预警值上限 this.upperWarnVal = []; // 亚安全上限 this.upperSubSafety = []; // 亚安全下限 this.lowerSubSafety = []; // 预警值下限 this.lowerWarnVal = []; // 时间线 this.timeList = []; // 这里用来存放图表的series this.arrays = []; // 去重处理(返回的数据里有多个项目,且每个项目有许多值) //例:[{ pro: 'name', value: '1' }, { pro: 'name', value: '2' }, { pro: 'name2', value: '3' }, { pro: 'name2', value: '4' }] // 我们把pro进行去重操作,去重方法在下面 this.checkPointList = this.unique(this.checkPointList); // 给图表加上四个固定值 this.arrays = [ { name: '预警值上限 ', type: 'line', data: this.upperWarnVal }, { name: '亚安全上限', type: 'line', data: this.upperSubSafety }, { name: '亚安全下限', type: 'line', data: this.lowerSubSafety }, { name: '预警值下限', type: 'line', data: this.lowerWarnVal }, ]; |
去重方法
1 2 3 4 5 | // 去重方法 unique(arr) { const res = new Map(); return arr.filter((a) => !res.has(a) && res.set(a, 1)); } |
3、思路 -步骤4 获得series
接着第三步骤
这里单独写个方法吧!直接写我对接口返回的数据进行操作的代码,可能会难以理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // tslint:disable-next-line:typedef GetSeries() { const arr1 = [{ pro: 'name', value: '1' }, { pro: 'name', value: '2' }, { pro: 'name2', value: '3' }, { pro: 'name2', value: '4' }]; const arr2 = ['name', 'name', 'name2', 'name2']; const arr3 = this.unique(arr2); console.log(arr3); this.children2 = []; this.arrays = []; arr3.forEach(element => { arr1.forEach(element2 => { if (element2.pro === element) { this.children2.push(element2.value); this.name = element; } }); const obj2: any = {}; obj2.name = this.name; obj2.type = 'line'; obj2.data = this.children2; this.arrays.push(obj2); this.children2 = []; }); console.log(this.arrays); } |
解释一下
接口返回的数据 --> arr1
获得所有的项目(checkPointList) -->arr2
去重操作(checkPointList) -> arr3
children2 是创建的全局变量
this.arrays中四个固定值我先暂时不写(步骤3里有写)
使用forEach循环
注意arr1 与 arr3 的循环顺序
可以看到结果
我这里模拟了两个项目,真实项目里是有很多的。
这个方法里,难点就在于:1、项目去重。2、把所有相同的项目里的值组成一个数组,再组成图表要的数据格式。
我感觉吧,就算再复杂的功能,一步一步去拆解,去解决,完成还是可以有可能的。