<!--
 * @FilePath: DynamicChart.vue
 * @Author: zz
 * @Date: 2024-04-12 16:42:47
 * @LastEditors: 
 * @LastEditTime: 2024-04-12 16:42:47
 * @Descripttion: 
-->
<template>
  <div ref="LChartRef" class="cc"></div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
let { t } = useI18n();

const prop = defineProps({
  xData: {
    type: Array,
    default: [],
  },
  seriesData: {
    type: Array,
    default: [],
  },
});

let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = () => {
  charts = proxy.$echarts.init(LChartRef.value, "dark");
  let option = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      data: ["实际产量", "产出进度"],
      textStyle: {
        color: "#AEEEFA",
      },
    },
    xAxis: [
      {
        type: "category",
        data: prop.xData,
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          fontSize: 12,
          color: "#AEEEFA",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "实际产量",
        nameTextStyle: {
          color: "#AEEEFA",
          fontSize: 12,
        },
        interval: 50,
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#032E4E",
          },
        },
        axisLabel: {
          formatter: "{value} ",
          fontSize: 12,
          color: "#AEEEFA",
        },
      },
      {
        type: "value",
        name: "产出进度",
        nameTextStyle: {
          color: "#AEEEFA",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#032E4E",
          },
        },
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: "{value} %",
          fontSize: 12,
          color: "#AEEEFA",
        },
      },
    ],
    series: prop.seriesData,
  };

  charts.setOption(option);
};

watch(
  () => prop.seriesData,
  (newVal, oldVal) => {
    charts.setOption({
      series: newVal,
    });
  },
  { deep: true }
);
watch(
  () => prop.xData,
  (newVal, oldVal) => {
    charts.setOption({
      xAxis: {
        type: "category",
        data: prop.xData,
      },
    });
  },
  { deep: true }
);

onMounted(() => {
  setCharts();
});
</script>

<style>
.cc {
  width: 100%;
  height: 100%;
}
</style>
