<template>
  <div id="map">暂无数据...</div>
</template>
<script>
export default {
  props: ["chartData", "rowParamList", "columnParamList", "indexParamList"],
  data() {
    return {
      option: {
        tooltip: { trigger: "item" },
        legend: { top: "5%", left: "center" },
        series: [],
      },
    };
  },
  mounted() {
    this.flush();
  },
  methods: {
    flush() {
      let { rowParamList, columnParamList, indexParamList, chartData } = this;
      let renameList = rowParamList
        .concat(columnParamList)
        .concat(indexParamList);
      chartData = chartData.map((i) =>
        renameList.reduce(
          (r, j) => ({ ...r, [j.columnComments]: i[j.columnName] }),
          {}
        )
      );
      indexParamList = indexParamList.map((i) => i.columnComments);
      let rows = rowParamList
        .concat(columnParamList)
        .map((i) => i.columnComments);
      let data = chartData.slice(0, 10);
      let option = {
        ...this.option,
        series: indexParamList.map((target) => {
          return {
            name: target,
            type: "pie",
            data: data.map((i) => ({
              value: parseInt(i[target] || 0),
              name: rows.map((j) => i[j]).join("-"),
            })),
          };
        }),
      };
      let chart = echarts.init(document.getElementById("map"));
      chart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss">
</style>