63 lines
1.1 KiB
Vue
Executable File
63 lines
1.1 KiB
Vue
Executable File
<template>
|
|
<div ref="chartRef" class="chart"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from 'echarts'
|
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
option: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
autoresize: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
const chartRef = ref(null)
|
|
let chartInstance = null
|
|
|
|
const initChart = () => {
|
|
if (!chartRef.value) return
|
|
chartInstance = echarts.init(chartRef.value)
|
|
chartInstance.setOption(props.option)
|
|
}
|
|
|
|
const resizeChart = () => {
|
|
chartInstance?.resize()
|
|
}
|
|
|
|
onMounted(() => {
|
|
initChart()
|
|
if (props.autoresize) {
|
|
window.addEventListener('resize', resizeChart)
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', resizeChart)
|
|
chartInstance?.dispose()
|
|
})
|
|
|
|
/* وقتی option از بیرون عوض شد */
|
|
watch(
|
|
() => props.option,
|
|
(newOption) => {
|
|
if (chartInstance && newOption) {
|
|
chartInstance.setOption(newOption, true)
|
|
}
|
|
},
|
|
{ deep: true }
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
</style>
|