vue中echarts饼状图二次封装（自适应大小）

1.子组件

<template>
    <div :id="id" :style="{ height: '100%', width: '100%' }"></div>
</template>

<script setup lang="ts">
/**
 * id
 * xAxisList，x轴数据
 * seriesDataList，y轴数据
 * legend，图例数据
 * dateList，标签数据
 * 这几个参数必须传
 *
 */
import * as echarts from 'echarts'
import { onMounted, defineProps, ref, watch, onBeforeUpdate } from 'vue'

const props = defineProps({
    id: {
        type: String,
        default: 'barChart',
    },
    xAxisList: {
        type: Object,
        default: ['浙江1', '北京1', '上海1', '广东1', '深圳1'],
    },
    seriesDataList: {
        type: Object,
        default: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
        ],
    },
    totalData: {
        type: String,
        default: '99999',
    },
    position: {
        type: String,
        default: 'outside',
    },
    legend: {
        type: Object,
        default: ['收入', '毛利润', '收入增长率', '利润增长率'],
    },
    dateList: {
        type: Object,
        default: [
            '2023-01-01',
            '2023-01-02',
            '2023-01-03',
            '2023-01-04',
            '2023-01-05',
        ],
    },
    units: {
        type: String,
        default: '',
    },
    charttype: {
        type: String,
        default: 'bar',
    },
    // legend排列方向
    orient: {
        type: String,
        default: 'vertical',
    },
    // legend位置
    top: {
        type: String,
        default: 'center',
    },
    // series位置
    seriesPosition: {
        type: String,
        default: '35%',
    },
    seriesBorderRadius: {
        type: Number,
        default: 0,
    },
    seriesBorderWidth: {
        type: Number,
        default: 0,
    }

})
let echart = echarts
watch(
    () => [props.seriesDataList, props.xAxisList, props.units],
    () => {
        //解决警告 There is a chart instance already initialized on the dom.
        echart.dispose(document.getElementById(props.id) as HTMLDivElement)
        initChart()
    },
    { deep: true },
)
const colorArr = [
    '#02c7af',
    '#62D256',
    '#FFC550',
    '#FF8853',
    '#FF6B8E',
    '#BF7E7E',
    '#D177CB',
    '#9E86DF',
    '#6881FF',
    '#91A1B1',
    '#5EB2E9',
]
// let idElem:any=''
onMounted(() => {
    initChart()
})
let Echarts: any = null
let initChart = () => {
    if (Echarts) {
        Echarts.dispose()
    }
    Echarts = null
    Echarts = echarts.init(document.getElementById(props.id) as HTMLDivElement)
    let options: any = {
        title: {
            show: props.seriesDataList.length > 0 ? false : true,
            text: '暂无数据',
            textStyle: {
                color: '#888888',
            },
            // subtext: 'Fake Data',
            left: 'center',
            top: '50%',
        },
        color: colorArr,
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: props.top,
            right: '5%',
            orient: props.orient,
            formatter: (name: string) => {
                let data = options.series[0].data
                let tarValue
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                        tarValue = data[i].value
                    }
                }
                return name + ':' + tarValue + props.units
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['35%', '65%'],
                center: [props.seriesPosition, '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: props.seriesBorderRadius,
                    borderColor: '#fff',
                    borderWidth: props.seriesBorderWidth,
                },
                label: {
                    show: true,
                    position: props.position,
                    formatter: (params: any) => {
                        if (props.position == 'center') {
                            let str = props.totalData
                            return str
                        } else {
                            return params.percent + '%'
                        }
                    },
                },
                data: props.seriesDataList,
                labelLine: {
                    show: true,
                },
            },
        ],
    }
    Echarts.setOption(options)
    const resizeObserver = new ResizeObserver(entries => {
        let elwidth = entries[0].contentRect.width

        setTimeout(() => {
            Echarts.resize({ width: elwidth, height: 'auto' })
        }, 300)
    })
    let idElem = document.getElementById(props.id) as HTMLDivElement
    resizeObserver.observe(idElem)
}
</script>

3.引用

import pieChart from '@/components/pieChart.vue'

<pieChart
          id="pieChartIdClass"
          :seriesDataList="!!typeDataList ? typeDataList : []"
          :units="'(元)'"
         >
</pieChart>