<!--
 * @Author: your name
 * @Date: 2023-06-28 09:51:38
 * @LastEditTime: 2023-06-29 10:46:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: 
-->
<template>
  <div class="ecahrtsBox">
      <div class="title font16" v-if="props.config.title">{{props.config.title}}</div>
      <div class="account" :style="`height:${config.echartHeight?config.echartHeight:280}px`">
          <div ref="echarBox"></div>
      </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import * as echartsConfiger from "./defaultConfiger"
import { ref, onMounted, defineProps, watch, watchEffect } from "vue";
const props= defineProps({
  config: {
    type: Object,
    default: () => {
        return {
            title: '',
            ecahrtType: '', //报表类型
            echartHeight: 280, // 报表高度
            option:{}
        }
    }
  },
});

let option= {}

//echarts容器
const echarBox = ref(null);
//初始化
function upEchares() {
  echarts.init(echarBox.value).setOption(option);
}
onMounted(() => {
  upEchares();
});

watchEffect(()=>{
  if(props.config.ecahrtType){
    option = echartsConfiger[props.config.ecahrtType + 'Option'](props.config.option)
  }
})
</script>

<style lang="scss" scoped>
.ecahrtsBox {
    .title{
        margin: 5px 5px 20px 5px;
    }
    .account{
        width: 100%;
        > div {
            width: 100%;
            height: 100%;
        }
    }
  
}
</style>