子组件
<template>
<div ref="chartRef" :style="{ width: '100%', height: '300px' }"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import { useWindowSize } from '@vueuse/core';
const props = defineProps({
options: {
type: Object,
required: true
}
});
const chartRef = ref(null);
let chartInstance = null;
const initChart = () => {
chartInstance = echarts.init(chartRef.value);
chartInstance.setOption(props.options);
};
const { width, height } = useWindowSize();
onMounted(() => {
initChart();
});
watch([width, height], () => {
if (chartInstance) {
chartInstance.resize();
}
});
watch(() => props.options,
(newOptions) => {
if (chartInstance) {
chartInstance.setOption(newOptions);
setTimeout(() => {
chartInstance.resize();
}, 100);
}
},
{ deep: true }
);
onUnmounted(() => {
if (chartInstance) {
chartInstance.dispose();
}
});
</script>
<style scoped></style>
调用方式
<ECharts :options="guanxianlianxianEcharts" style="height: 100%;" />
import ECharts from '@/components/Echarts';
const guanxianlianxianEcharts = reactive({
title: {
text: '规划占用现状要素分析——综合管线',
left: 'center',
textStyle: {
color: '#FFF',
fontStyle: 'normal',
fontWeight: 'bold',
fontFamily: 'sans-serif',
fontSize: 22
},
},
tooltip: {},
legend: {
data: ['占用面积(m²)', '拆迁/调整面积(m²)'],
top: 28,
itemWidth: 12,
itemHeight: 12,
textStyle: {
fontSize: 15,
color: '#FFF'
}
},
xAxis: {
data: ['房屋', '林地', '耕地'],
axisLabel: {
interval: 0,
fontSize: 15,
color: '#FFF',
formatter: function (value) {
return `{vertical|${value.split('').join('\n')}}`;
},
rich: {
vertical: {
lineHeight: 13,
align: 'center',
verticalAlign: 'middle',
width: 12,
fontSize: 14,
fontFamily: 'Arial',
},
},
},
},
yAxis: {},
series: [
{
name: '占用面积(m²)',
type: 'bar',
data: []
},
{
name: '拆迁/调整面积(m²)',
type: 'bar',
data: []
},
]
});