Js 通过某个字段汇总对象数组

此方法以动态加载echarts为例
动态生成x轴与数据

function groupArr(list, field) {
  var obj = {};
  for (var i = 0; i < list.length; i++) {
    for (var item in list[i]) {
      if (item == field) {
        obj[list[i][item]] = {
          name: list[i].name,
          data: obj[list[i][field]] ? obj[list[i][field]].data : [],
          xAxis: obj[list[i][field]] ? obj[list[i][field]].xAxis : [],
          legend: [list[i].name],
        };
      }
    }
    obj[list[i][field]].data.push(list[i].value);
    obj[list[i][field]].xAxis.push(list[i].xAxis);

  }
  var att = [];
  for (item in obj) {
    att.push({
      data: obj[item].data,
      name: obj[item].name,
      legend: obj[item].legend,
      xAxis:obj[item].xAxis,
      stack: "数量",
      type: "line",
    });
  }
  return att;
}

附加动态echarts组件

<template>
  <el-row :gutter="20" style="margin-top:50px">
    <div :class="className" ref="mychart" :style="{height:height,width:width}" />
  </el-row>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "98%"
    },
    height: {
      type: String,
      default: "400px"
    },
    series: {
      type: Object,
      default: {}
    },
    xAxis: {
      type: Array,
      default: []
    },
    legend: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      // this.getData();
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.mychart, "macarons");

      this.chart.setOption({
        title: {
          text: this.legend[0],
          left: 'center',
          align: 'right'
          
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.legend,
          left: 30
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxis
        },
        yAxis: {
          type: "value"
        },
        series: [this.series]
      });
    }
  }
};
</script>