使用 Lodash 工具后代碼行數(shù)瞬間縮短...
作者：Timor
來源：SegmentFault 思否社區(qū)
背景
最近在做報表.涉及到echarts圖表.多層柱狀圖疊加展示.然后后端給出來的結(jié)構(gòu)是二維數(shù)組.需要前端自行處理成圖表可用的數(shù)據(jù)格式.echarts數(shù)據(jù)是是動態(tài)的。
需求效果圖的樣子:
echarts相似的官網(wǎng)案例代碼:
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, //去掉網(wǎng)格線
},
axisTick: {
show: true,
length: 4,
lineStyle: {
color: '#D8D8D8',
},
},
axisLabel: {
show: true,
color: '#606C7B',
},
axisLine: {
show: true,
lineStyle: {
color: '#D8D8D8',
},
},
name: '次數(shù)',
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]
},
]
};
官網(wǎng)的代碼實現(xiàn)示例圖 :
由此可以看到.需要的series里的數(shù)據(jù)結(jié)構(gòu)是這樣的:
{
name: 'C', //等級名稱
type: 'bar',
stack: 'total',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310] //對應(yīng)的每一天的值
},
開始我的數(shù)據(jù)處理路程
先給出后端返回的數(shù)據(jù)
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,
}]
1.先拿到所有的等級(不同的人看到的等級是不同的,但是每一天的等級會是一致的)搭建好等級外層數(shù)據(jù)結(jié)構(gòu).一個唯一鍵,一個等級名稱,一個等級對應(yīng)的每天的值data.
var data =[ key: 'levelList' + index, value: item.priority, data: [] ]
//用data存一下后端返回的值
var data = this.reportList || [];
//創(chuàng)建外層等級殼子
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]));
}
最后得到的數(shù)據(jù)結(jié)構(gòu):
首先項目里安裝一下:
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 || [];
//創(chuàng)建外層等級殼子
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圖的整體數(shù)據(jù)吧
//日均call數(shù)
setDayNumChart=()=>{
//data保存從后端取回的數(shù)據(jù)
var data = this.reportList?.dt_priority_m || [];
//創(chuàng)建外層等級殼子
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數(shù)',
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, //去掉網(wǎng)格線
},
axisTick: {
show: true,
length: 4,
lineStyle: {
color: '#D8D8D8',
},
},
axisLabel: {
show: true,
color: '#606C7B',
},
axisLine: {
show: true,
lineStyle: {
color: '#D8D8D8',
},
},
name: '次數(shù)',
type: 'value',
},
],
// 滑動
dataZoom: [
{
show: true, // 是否顯示
start: 0, // 伸縮條開始位置（1-100），可以隨時更改
type: 'inside',
throttle: 40,
endValue: 5,
},
],
series: seriesData,
};
}
評論
圖片
表情