<template>
  <div id="map">暂无数据...</div>
</template>
<script>
export default {
  props: ["chartData", "rowParamList", "columnParamList", "indexParamList"],
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        grid: { containLabel: true, left: 40, right: 60, bottom: 100 },
        xAxis: {
          type: "category",
          data: [],
          axisTick: { alignWithLabel: true },
          axisLabel: { interval: 0, rotate: -20 },
        },
        yAxis: [{ type: "value" }],
      },
    };
  },
  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 option = {
        ...this.option,
        legend: { data: indexParamList },
        series: indexParamList.map((target) => {
          return {
            name: target,
            type: "bar",
            barMaxWidth: 30,
            data: chartData.map((i) => parseInt(i[target] || 0)),
          };
        }),
      };
      let chartWidth = document.getElementById("map").clientWidth;
      let endValue = Math.floor(chartWidth / 50 / option.series.length);
      let dataZoom = [
        { type: "inside", endValue },
        { type: "slider", endValue },
      ];
      option.dataZoom = dataZoom;
      option.xAxis.data = chartData.map((i) => rows.map((k) => i[k]).join("-"));
      let chart = echarts.init(document.getElementById("map"));
      chart.setOption(option, true);
    },
  },
};
</script>
<style>
</style>