<template>
  <div
    class="charts"
    ref="chartRef"
    style="height: 300px; width: 1000px; display: block"
  ></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, watch } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
import { useRoute, useRouter } from "vue-router";

const chartRef = ref();
let chart = ref(null);
const props = defineProps<{
  chartsData?: any;
  data?: string;
}>();

const initChart = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    const option = {
      title: {
        text: props.chartsData.title,
        textStyle: {
          fontSize: 16,
          color: "rgba(0,0,0,0.9)",
          lineHeight: 10,
        },
      },
      tooltip: {
        trigger: "axis",
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
            title: {
              zoom: "区域缩放",
              back: "区域缩放还原",
            },
          },
        },
      },
      legend: {
        data: props.chartsData.legendData,

        padding: 5,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: props.chartsData.xaxisData,
        axisLabel: {
          align: "left",
        },
        // nameLocation: "middle",
      },
      yAxis: {
        type: "value",
        name: props.data,
        nameLocation: "end",
        nameTextStyle: {
          fontSize: 12,
          color: "rgba(0, 0, 0, 0.40)",
          align: "right",
          padding: [10, 6, 7, 10],
        },
      },
      series: props.chartsData.series || [],
    };
    // 使用刚指定的配置项和数据显示图表。

    chart.setOption(option);
    window.addEventListener("resize", () => {
      chart.resize();
    });
  }
};

//dom 渲染后钩子
// onMounted(() => {
//   initChart();
// });
watch(
  () => props.chartsData,
  () => {
    initChart();
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped></style>
