编写一个Echarts通用组件

子组件

<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', // 字体风格, 可选值: 'normal', 'italic', 'oblique'
            fontWeight: 'bold', // 字体粗细, 可选值: 'normal', 'bold', 'bolder', 'lighter'
            fontFamily: 'sans-serif', // 字体系列
            fontSize: 22 // 字体大小
        },
    },
    tooltip: {},
    legend: {
        data: ['占用面积(m²)', '拆迁/调整面积(m²)'],
        top: 28,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            fontSize: 15,
            color: '#FFF'
        }
    },
    xAxis: {
        data: ['房屋', '林地', '耕地'],
        // axisLabel: {
        //     rotate: 45,  // 设置标签旋转角度为 45 度
        //     interval: 0, // 设置标签显示间隔，0 表示每个标签都显示
        //     fontSize: 15, // 标签字体大小
        //     color: '#FFF' // 标签字体颜色
        // },
        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: []
        },
    ]
});