windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/rateAnalysis/components/chart.vue

<script setup>
    import util from "@tools/util";
    import chartTheme from './../rateAnalysis.json'
    import {
        ref,
        toRaw,
        computed,
        onMounted,
        watch,
        nextTick
    } from 'vue';
    import {
        useStore
    } from 'vuex';
    import * as echarts from 'echarts'
    const chartId = 'chart-' + util.newGUID(); //chartId
    const chartIns = ref(null) //chart 实例
    const props = defineProps({
        xAxis: {
            type: Object,
            required: true,
            default: () => ({})
        },
        series: {
            type: Array,
            required: true
        },
        height: {
            type: String,
            required: false,
            default: '500px'
        },
        width: {
            type: String,
            required: false,
            default: '500px'
        },
        title: {
            type: String,
            required: false
        },
        subtext: {
            type: String,
            required: false
        },
        // 是否为dialog中单表
        isDiaAlone: {
            type: Boolean,
            default: false
        },
        // 是否含雷达图
        isRadar: {
            type: Boolean,
            default: false
        },
        theme: {
            type: Boolean,
            default: false
        },
        echartsTheme: {
            type: String,
            default: ''
        },
    })

    /**定义option */
    const option = computed({
        get() {
            let radar = null
            if (props.isRadar && props.xAxis.data.length) {
                radar = {
                    radius: '70%',
                    center: ['60%', '50%'],
                    indicator: props.xAxis.data.map(o => {
                        return {
                            text: '',
                            max: 1000
                        }
                    }),
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }
            }
            return {
                backgroundColor: '',
                title: {
                    text: props.title || '',
                    subtext: props.subtext || '',
                    top: 10,
                    left: props.isDiaAlone ? '22%' : '5%',
                },
                angleAxis: props.xAxis || {},
                radiusAxis: {},
                polar: {
                    radius: '70%',
                    center: ['60%', '50%']
                },
                radar: radar,
                tooltip: {
                    formatter: (params) => {
                        return params.componentSubType === 'radar' ?
                            `${params.marker}${params.seriesName}` :
                            `${params.marker}${params.seriesName}m<br/>${params.value>1? '频次：'+ params.value: ''}`
                    },
                    confine: true
                },
                series: props.series || [],
                legend: {
                    show: true,
                    orient: 'vertical',
                    left: props.isDiaAlone ? '22%' : '5%',
                    itemWidth: 16,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: util.vh(10)
                    },
                    top: 'middle',
                    // data: ['0-2.5', '2.5-5', '5-7.5', '7.5-10', '10-12.5', '12.5-15', '15-17.5', '17.5-20',
                    //     '20-22.5', '22.5-25', '25-inf'
                    // ]
                    data: ['0-3', '3-5', '5-10', '10-12', '12-25', '25-inf']
                }
            }
        },
        set(val) {}
    })
    watch(() => option, (newVal, oldVal) => {
        if (chartIns.value) {
            const echartIns = toRaw(chartIns.value)
            echartIns.setOption(newVal.value)
        }
    }, {
        deep: true
    })

    watch([() => props.width, () => props.height], (newVal, oldVal) => {
        if (chartIns.value) {
            const echartIns = toRaw(chartIns.value)
            nextTick(() => echartIns.resize())
        }
    })
    const store = useStore()
    const collapse = computed({
        get() {
            return store.state.collapse
        },
        set(val) {}
    })
    watch(collapse, (val) => {
        if (chartIns.value) {
            setTimeout(() => {
                chartIns.value.resize()
            }, 300)
        }
    })


    onMounted(() => {
        nextTick(() => {
            init()
        })
    })

    watch(() => props.echartsTheme, (newVal, oldVal) => init())

    const init = () => {
        echarts.registerTheme('chartTheme', chartTheme)
        const echartIns = echarts.init(document.getElementById(chartId), props.echartsTheme)
        document.getElementById(chartId).removeAttribute("_echarts_instance_") ? document.getElementById(chartId)
            .removeAttribute("_echarts_instance_") : ''
        chartIns.value = echartIns
        echartIns.setOption(option.value)
        window.addEventListener('resize', () => {
            echartIns.resize()
        })
    }
</script>
<template>
    <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
</template>