背景:最近在做报表.波及到echarts图表.多层柱状图叠加展现.而后后端给进去的构造是二维数组.须要前端自行处理成图表可用的数据格式.echarts数据是是动静的.
需要效果图的样子:
echarts类似的官网案例代码:
option = { tooltip: { trigger: 'axis', }, legend: { data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine'] }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [ { splitLine: { show: false, //去掉网格线 }, axisTick: { show: true, length: 4, lineStyle: { color: '#D8D8D8', }, }, axisLabel: { show: true, color: '#606C7B', }, axisLine: { show: true, lineStyle: { color: '#D8D8D8', }, }, name: '次数', type: 'value', }, ], series: [ { name: 'A', type: 'bar', stack: 'total', emphasis: { focus: 'series' }, data: [320, 302, 301, 334, 390, 330, 320] }, { name: 'B', type: 'bar', stack: 'total', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'C', type: 'bar', stack: 'total', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, ]};官网的代码实现示例图 :
由此能够看到.须要的series里的数据结构是这样的:
{ name: 'C', //等级名称 type: 'bar', stack: 'total', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] //对应的每一天的值 },开始我的数据处理途程
- 先给出后端返回的数据
var data = [ { dt: 1, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 1, priority: "B级-一般", call_day_cnt: 0, }, { dt: 1, priority: "V级-重要", call_day_cnt: 0, }, { dt: 1, priority: "无", call_day_cnt: 0, }, { dt: 2, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 2, priority: "B级-一般", call_day_cnt: 0, }, { dt: 2, priority: "V级-重要", call_day_cnt: 0, }, { dt: 2, priority: "无", call_day_cnt: 0, }, { dt: 3, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 3, priority: "B级-一般", call_day_cnt: 0, }, { dt: 3, priority: "V级-重要", call_day_cnt: 0, }, { dt: 3, priority: "无", call_day_cnt: 0, }, { dt: 4, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 4, priority: "B级-一般", call_day_cnt: 0, }, { dt: 4, priority: "V级-重要", call_day_cnt: 0, }, { dt: 4, priority: "无", call_day_cnt: 0, }, { dt: 5, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 5, priority: "B级-一般", call_day_cnt: 0, }, { dt: 5, priority: "V级-重要", call_day_cnt: 0, }, { dt: 5, priority: "无", call_day_cnt: 0, }, { dt: 6, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 6, priority: "B级-一般", call_day_cnt: 0, }, { dt: 6, priority: "V级-重要", call_day_cnt: 0, }, { dt: 6, priority: "无", call_day_cnt: 0, }, { dt: 7, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 7, priority: "B级-一般", call_day_cnt: 0, }, { dt: 7, priority: "V级-重要", call_day_cnt: 0, }, { dt: 7, priority: "无", call_day_cnt: 0, }, { dt: 8, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 8, priority: "B级-一般", call_day_cnt: 0, }, { dt: 8, priority: "V级-重要", call_day_cnt: 0, }, { dt: 8, priority: "无", call_day_cnt: 0, }, { dt: 9, priority: "A级-高潜", call_day_cnt: 0, }, { dt: 9, priority: "B级-一般", call_day_cnt: 0, }, { dt: 9, priority: "V级-重要", call_day_cnt: 0, }, { dt: 9, priority: "无", call_day_cnt: 0, }]- 我的解决思路
先拿到所有的等级(不同的人看到的等级是不同的,然而每一天的等级会是统一的)搭建好等级外层数据结构.一个惟一键,一个等级名称,一个等级对应的每天的值data.
var data =[ key: 'levelList' + index, value: item.priority, data: [] ]- 遍历成图表所需的数据格式,先依照priority去分类.再塞进创立好的等级对应的data中.
//用data存一下后端返回的值 var data = this.reportList || []; //创立外层等级壳子 var level = []; data.map((item, index) => { if (item.dt == 1) { level.push({ key: 'levelList' + index, value: item.priority, data: [], }); } }); //分组 var json = {}; for (let i = 0; i < data.length; i++) { if (!json.hasOwnProperty(data[i].priority))json[data[i].priority] = []; level.map(item => item.value === data[i].priority && item.data.push(data[i])); }最初失去的数据结构:
这样写是能够拿到,然而写法不是很好.
直到共事给我安利了Lodash工具...真的香...
官网链接如下 :
Lodash中武官网
首先我的项目里装置一下:npm install lodash
而后js外面援用一下:import _ from 'lodash'
而后就能够应用了:
//用data存一下后端返回的值 var data = this.reportList || []; //priority是分组字段 const a = _.groupBy(data,'priority') console.log('a--------',a)后果:
后端应该给出惟一键非中文的用来分组的.如果没有给的话.分组后的名字默认就是分组关键字.这时候本人再略微解决下也能够.例如 :
//用data存一下后端返回的值 var data = this.reportList || [];//创立外层等级壳子 var level = []; data.map((item, index) => { if (item.dt == 1) { level.push({ key: 'levelList' + index, value: item.priority, data: [], }); } }); //分组 const groupList = _.groupBy(data,'priority') for(var i in groupList){ level.map(item => item.value === groupList[i].key && item.data.push(data[i])); } console.log('level-----------',level)最初后果 :
最初贴出来这个echarts图的整体数据吧
//日均call数 setDayNumChart=()=>{ //data保留从后端取回的数据 var data = this.reportList?.dt_priority_m || []; //创立外层等级壳子 var level = []; data.map((item, index) => { if (item.dt == 1) { level.push({ key: 'levelList' + index, value: item.priority, data: [], }); } }); //分组 const groupList = _.groupBy(data,'priority') for(var i in groupList){ level.map(item => item.value === groupList[i].key && item.data.push(data[i])); } //抽出series var seriesData = []; level.map((item) => { seriesData.push({ name: item.value, type: 'bar', stack: '级别', barWidth: '30%', emphasis: { focus: 'series', }, data: item.data.map((item) => item.call_day_cnt), }); }); // 提取出X轴的值 var date = [] level && level[0].data.map(item => { date.push(item.dt) }) // echarts赋值 this.dayNumChart = { title: { text: '日均Call数', textStyle: { show: true, color: '#C3C7CC', fontSize: 16, fontWeight: 400, }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, legend: { bottom: 0, data: level.map((item) => item.value), }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true, length: 3, lineStyle: { color: '#D8D8D8', }, }, axisLine: { show: true, lineStyle: { color: '#D8D8D8', }, }, axisLabel: { show: true, color: '#606C7B', }, data: date, }, ], yAxis: [ { splitLine: { show: false, //去掉网格线 }, axisTick: { show: true, length: 4, lineStyle: { color: '#D8D8D8', }, }, axisLabel: { show: true, color: '#606C7B', }, axisLine: { show: true, lineStyle: { color: '#D8D8D8', }, }, name: '次数', type: 'value', }, ], // 滑动 dataZoom: [ { show: true, // 是否显示 start: 0, // 伸缩条开始地位（1-100），能够随时更改 type: 'inside', throttle: 40, endValue: 5, }, ], series: seriesData, }; }