go-viee-fetch-Demo/src/packages/components/Charts/IntegratedEnergy/FeeOverview/index.vue

<template>
    <Background title-text="费用概况" :select-option-mode="0">
        <!-- <img src="./assets/title.svg" class="svg" />
        <div class="header-title">有限空间分布情况</div> -->
        <div class="title-value">
            <div class="title-value_number">100.00</div>
            <div class="title-value_unit">/万元</div>
        </div>
        <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
    </Background>

</template>

<script setup lang="ts">
import 'echarts-gl'
import { toRaw, toReadonly, toRefs } from '@vue/reactivity'
import { isPreview } from '@/utils'
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 Background from '../Background/index.vue'
import axiosInstance from '@/api/axios';

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 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>
.title-value {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 60px;
    width:200px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
}
.title-value_number {
    padding-right: 12px;
}
</style>