<template>
  <div class="my-report-echart">
    <div class="echarts" :id="id">

    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {setEcharts} from "@/echarts/option";
import {nextTick,watch} from "vue";
export default {
  name: "MyReportEchart",
  props:{
    id:{

    },
    myChartOptions:{
    }
  },
  setup(props){
    let chartId = ref(props.id);
    chartId.value = chartId + 'eleCommon';
    function setChartValue(val){
        let eleCommon = document.getElementById(val.UUID);
        setEcharts(eleCommon,val.CHART_CONTENT_TEXT);
    }
    onMounted(()=>{
      nextTick(() => {
        let eleCommon = document.getElementById(props.id);
        setEcharts(eleCommon,props.myChartOptions)
      })
    });
    return {
      setChartValue, chartId
    }
  }
}
</script>

<style scoped lang="scss">
.my-report-echart{
  width: 98%;
  padding-left: 1%;
  height:260px ;
  .echarts{
    width: 100%;
    height: 100%;
  }
}
</style>
