乐趣区

关于lodash:使用Lodash工具后代码行数瞬间缩短

jiezi
背景: 最近在做报表. 波及到 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,
  }]
  • 我的解决思路

  1. 先拿到所有的等级 (不同的人看到的等级是不同的, 然而每一天的等级会是统一的) 搭建好等级外层数据结构. 一个惟一键, 一个等级名称, 一个等级对应的每天的值 data.

    var data =[key: 'levelList' + index, value: item.priority, data: [] ]
  2. 遍历成图表所需的数据格式, 先依照 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,
    };
  }
退出移动版