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

<template>
    <div class="go-border-box">
        <img src="./assets/title.svg" class="svg" />
        <div class="header-title">各企业有限空间总数及各等级有限空间的数量        </div>
        <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
    </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';

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>
@include go(border-box) {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    // 不渐变
    // background-color: #0E121B;
    // 渐变
    background: linear-gradient(to top,
            rgba(14, 18, 27, 1) 0%,
            rgba(14, 18, 27, 0.6) 100%);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 5px;
        padding: 2px;
        /* 边框宽度 */
        background: linear-gradient(to top,
                rgba(128, 128, 128, 0.3),
                rgba(128, 128, 128, 0));
        -webkit-mask:
            linear-gradient(#fff, #fff) content-box,
            linear-gradient(#fff, #fff);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

.header-title {
    position: absolute;
    top: 0;
    height: 45px;
    line-height: 45px;
    left: 70px;
    white-space: nowrap;
    font-family: 'CustomFont';
    font-style: italic;
    letter-spacing: 0.5px;
    color: #eee;
    text-shadow: 1px 3px 10px #000000;
    font-size: 16px;
}


.svg {
    width: 100%;
    height: 45px;
}
</style>