41 lines
716 B
Vue
41 lines
716 B
Vue
|
<template>
|
||
|
|
<div ref="LChartRef" class="cc"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
||
|
|
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
optionData: {
|
||
|
|
type: Object,
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
let LChartRef = ref(null);
|
||
|
|
const { proxy } = getCurrentInstance() as any;
|
||
|
|
let charts = null;
|
||
|
|
const setCharts = () => {
|
||
|
|
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||
|
|
let option = prop.optionData
|
||
|
|
|
||
|
|
charts.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(() => prop.optionData, (newVal, oldVal) => {
|
||
|
|
charts.setOption(newVal);
|
||
|
|
}, { deep: true })
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
setCharts()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.cc {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|