<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:29:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:05:45
 * @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
-->

<!-- 
*** 初始化echarts图标容器，然后再开始渲染。

加油机状态、油站分布图、报警次数      图形框架？
饼图、地图、折线图 
-->

<template>
  <div :id="props.id" :class="props.className" :style="{ height: props.height, width: props.width }" />
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, defineProps, onMounted, onBeforeUnmount, watch, onUpdated } from 'vue';

// -- 子组件 。 -- echarts/index的作用是初始化图表容器
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  id: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  options: {
    type: Object,
    default: () => ({})
  }
})

let chart = ref(null)

onUpdated(() => {
  // -- 挂在完成 调用echart初始化方法
  initChart();
})

onBeforeUnmount(() => {
  // -- 销毁组件前 销毁echart实例
  echarts.dispose(chart)
  chart = null
})

const initChart = async () => {
  // 初始化echart
  chart = echarts.init(document.getElementById(props.id))
  chart.setOption(props.options, true)
}

watch(props.options, (Val) => {
  chart.setOption(Val, true)
}, { deep: true })
</script>

<style></style>