<template>
  <div ref="echart" :style="{ height: height, width: width }"></div>
</template>

<script setup>
import * as echarts from "echarts";
import useResize from "@/hooks/useResize"; // hook

const { proxy } = getCurrentInstance(); // 获取实例中的proxy

let echart;
let echartInstance;

const props = defineProps({
  // 数据
  data: {
    type: Array,
    default: [
      { data: 10, name: "data 1" },
      { value: 30, name: "data 2" },
      { value: 40, name: "data 3" },
    ],
  },
  // 高度
  height: {
    type: [Number, String],
    default: "300px",
  },
  // 宽度
  width: {
    type: [Number, String],
    default: "100%",
  },
});

const { data } = toRefs(props);

const data1 = reactive({
  option: {
    xAxis: {
      type: "category",
      data: data.value.map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}",
    },
    series: [
      {
        data: data.value.map((item) => item.value),
        type: "bar",
      },
    ],
  },
});

const { option } = toRefs(data1);

// 观察 data ，重新绘制
watch(
  data,
  (newValue) => {
    console.log(newValue);
    option.value.xAxis.data = newValue.map((item) => item.name);
    option.value.series[0].data = newValue.map((item) => item.value);
  },
  { deep: true }
);
watch(
  option,
  (newValue) => {
    echartInstance.setOption(newValue, true);
  },
  { deep: true }
);

onMounted(() => {
  echart = proxy.$refs.echart; // 获取的DOM根节点
  echartInstance = echarts.init(echart, "macarons"); // 初始化 echart
  echartInstance.setOption(option.value, true); // 绘制
  // notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
  // setOption 见 https://echarts.apache.org/zh/api.html#echartsInstance.setOption
});

function resize() {
  echartInstance.resize();
}

// 暴露函数 （供hook调用）
defineExpose({
  resize,
});

useResize();
</script>