72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div ref="childChart" style="width: 600px; height: 400px;"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ChildComponent',
|
||
|
|
setup() {
|
||
|
|
const childChart = ref(null);
|
||
|
|
let childChartInstance = null;
|
||
|
|
|
||
|
|
const initChart = () => {
|
||
|
|
childChartInstance = echarts.init(childChart.value);
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: 'Child Chart',
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||
|
|
},
|
||
|
|
dataZoom: [
|
||
|
|
{
|
||
|
|
type: 'inside',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||
|
|
type: 'line',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
childChartInstance.setOption(option);
|
||
|
|
};
|
||
|
|
|
||
|
|
const destroyChart = () => {
|
||
|
|
if (childChartInstance) {
|
||
|
|
childChartInstance.dispose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
initChart();
|
||
|
|
});
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
destroyChart();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Expose a method to get the chart instance
|
||
|
|
const getChartInstance = () => {
|
||
|
|
return childChartInstance;
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
childChart,
|
||
|
|
getChartInstance,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* Add your styles here */
|
||
|
|
</style>
|