go-viee-fetch-Demo/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue

<template>
    <div class="go-border-box">
        <PublicSmallBorder :title-text="props.chartConfig.option.titleText">
            <div class="content">
                <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor"
                    :option="option"></v-chart>
            </div>
        </PublicSmallBorder>
    </div>

</template>

<script setup lang="ts">
import 'echarts-gl'
import { computed, onMounted, PropType, reactive, watch } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { mergeTheme } from '@/packages/public/chart'
import config, { includes } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import dataJson from './data.json'
import { getPie3D } from './3dPie'
import axiosInstance from '@/api/axios';
import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
const props = defineProps({
    themeSetting: {
        type: Object,
        required: true
    },
    themeColor: {
        type: Object,
        required: true
    },
    chartConfig: {
        type: Object as PropType<config>,
        required: true
    }
})

const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])

const option = computed(() => {
    return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

// 初始化图表数据
const initializeChartData = () => {
    // 使用 dataJson 中的 source 数据初始化图表
    if (dataJson && dataJson.source) {
        props.chartConfig.option.dataset = { ...dataJson }

        // 计算总数并更新标题
        const totalValue = dataJson.source.reduce((total: number, item: any) => {
            return total + (item.value || 0)
        }, 0)

        // 更新图表标题中的总数
        if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
            props.chartConfig.option.title[0].text = totalValue
        }

        const series = getPie3D(dataJson.source, 0.8);

        props.chartConfig.option.series = series

        console.log('图表数据已初始化:', props.chartConfig.option.dataset)
    }
}

const updateChartData = (newData: any) => {
    if (!newData) return

    // 确保数据被正确设置到图表配置中
    props.chartConfig.option.dataset = newData

    const totalValue = newData.source.reduce((total: number, item: any) => {
        return total + (item.value || 0)
    }, 0)

    // 更新图表标题中的总数
    if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
        props.chartConfig.option.title[0].text = totalValue
    }

    const series = getPie3D(newData.source, 0.8);
    props.chartConfig.option.series = series;
}

watch(
    () => props.chartConfig.option.dataset,
    newData => {
        if (newData) {
            updateChartData(newData)
        }
    },
    { deep: true, immediate: true }
)


const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
    updateChartData(newData)
})

// 组件挂载时初始化数据
onMounted(async () => {
    initializeChartData()
});
</script>

<style lang="scss" scoped>
.go-border-box {
    width: 100%;

    height: 100%;

    .content {
        width: 100%;
        height: 100%;
    }

}
</style>