vue echarts封装数据处理问题？

Question

echarts二次封装成后台可配置化，现在对一些数据处理有些问题，需要想大佬求教一下，以下是折线图封装。
完整代码：

<template>
  <fin-chart class="chart" :autoresize="true" theme="find-echarts-theme" :options="chartOpt" />
</template>
<script>
import FinChart from '@/plugins/echarts';

export default {
  components: {
    FinChart,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    category: {
      type: Array,
      default: () => [],
    },
    xData: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    title(val) {
      this.chartOpt.title.text = val;
    },
    xData: {
      handler(val) {
        this.chartOpt = Object.assign(this.chartOpt, {
          xAxis: {
            type: 'category',
            data: val,
          },
        });
      },
      deep: true,
    },
    yData: {
      handler() {
        // this.chartOpt = Object.assign(this.chartOpt, {
        //   series: [
        //     {
        //       data: this.handleData(),
        //       type: 'line',
        //     },
        //   ],
        // });
        this.chartOpt.series = this.getSeries();
      },
      deep: true,
    },
  },
  data() {
    return {
      chartOpt: {
        title: {
          text: this.title,
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#000',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.xData,
        },
        // 设置上下左右边距
        grid: {
          top: 40,
          left: 10,
          right: 20,
          bottom: 20,
          containLabel: true,
        },
        yAxis: {
          type: 'value',
        },
        series: this.getSeries(),
      },
    };
  },
  created() {
    this.handleData();
    console.log(this.getSeries());
  },
  methods: {
    handleData() {
      const len = this.category.length;
      const data = [];
      for (let i = 0; i < len; i++) {
        data.push({
          name: this.category[i],
          data: this.yData[i],
        });
      }
      return data;
    },
    getSeries() {
      const data = this.handleData();
      // const config = this.getExtsConfig();
      return [
        {
          type: 'line',
          data,
          stack: 'Total',
        },
      ];
    },
    getExtsConfig() {
      if (!this.exts) return {};
      let exts = {};
      try {
        exts = JSON.parse(this.exts);
      } catch (error) {
        console.error('解析组件额外参数出错！', error);
        return {};
      }
      const { roseType, radius } = exts;
      if (roseType === 'rose') {
        return {
          radius: radius ? radius : ['20%', '80%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8,
          },
        };
      } else if (roseType === 'ring') {
        return {
          radius: radius ? radius : ['20%', '80%'],
        };
      } else {
        return {
          radius: '80%',
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>

关键数据处理代码：

handleData() {
      const len = this.category.length;
      const data = [];
      for (let i = 0; i < len; i++) {
        data.push({
          name: this.category[i],
          data: this.yData[i],
        });
      }
      return data;
    },

数据配置

getSeries() {
      const data = this.handleData();
      // const config = this.getExtsConfig();
      return [
        {
          type: 'line',
          data,
          stack: 'Total',
        },
      ];
    },

本地静态数据：

children: [
      {
        name: '折线图',
        type: 'CHARTLINE',
        icon: 'imos-iconfont imos-icon-linechart',
        demo: {
          title: '新增需求数量',
          category: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          xData: ['星期一', '星期二', '星期三', '星期四', '星期五'],
          yData: [
            [1, 3, 10, 5, 3],
            [3, 11, 23, 12, 28],
            [5, 12, 32, 42, 32],
            [11, 14, 27, 24, 37],
            [13, 16, 28, 27, 34],
          ],
        },

打印出来的数据：

而我想要的是这种格式的：

series: [
    {
      name: '11',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

哪里出问题了，大佬帮忙看看

Answer 1

看你需求，直接使用数组的 map 方法即可：

getSeries() {
  return this.category.map((item, idx) => ({
    name: item,
    type: 'line',
    stack: 'Total',
    data: this.yData[idx]
  });
},