gxt_app/components/index/flow-chart/flow-chart.uvue

<template>
    <view class="flow-chart">
        <view class="chart-container">
            <tui-xechars class="chart-canvas" @initFinished="onChartInit" />
            <view class="chart-legend">
                <view v-for="(item, index) in flowLegendData" :key="index" class="legend-item">
                    <view class="legend-left">
                        <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
                        <text class="legend-name">{{ item.name }}</text>
                    </view>
                    <view class="legend-right">
                        <text class="legend-value">{{ item.value }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
    import { TuiCharts } from '@/uni_modules/tui-xechars'

    // 流量数据类型
    type FlowDataItem = {
        name: string
        value: number
        color: string
    }
    
    // 支流出库流量数据（用于图例显示）
    const flowLegendData = ref<FlowDataItem[]>([
        { name: '汉江', value: 195, color: '#5B9BF3' },
        { name: '陶岔', value: 224, color: '#4DD4C0' },
        { name: '肖楼', value: 10.92, color: '#FF9966' },
        { name: '襄引', value: 15, color: '#FF6B96' },
        { name: '鄂北', value: 6, color: '#9B7FE8' }
    ])
    
    // 图表初始化
    const onChartInit = (charts: TuiCharts): void => {
        // 支流出库流量数据
        const flowData: FlowDataItem[] = flowLegendData.value
        
        // 计算总流量
        let totalFlow: number = 0
        flowData.forEach((item) => {
            totalFlow += item.value
        })
        
        // 创建多重整圆进度条配置
        const option: UTSJSONObject = {
            type: 'arcbar',
            animation: true,
            dataLabel: false,
            fontSize: 12,
            padding: [10, 200, 10, 10],
            series: flowData.map((item) => {
                return {
                    name: `${item.name}  ${item.value}`,
                    color: item.color,
                    data: [{ value: item.value / totalFlow }]
                }
            }),
            title: {
                name: '',
                fontSize: 0,
                color: '#333333'
            },
            subtitle: {
                name: '',
                fontSize: 0,
                color: '#666666'
            },
            legend: {
                show: false
            },
            extra: {
                arcbar: {
                    type: 'circle',
                    direction: 'ccw',
                    width: 8,
                    backgroundColor: '#C4D7E9',
                    startAngle: 1.5,
                    endAngle: 0.25,
                    gap: 2
                }
            }
        }
        
        // 添加图表并设置坐标
        const arcbarChart = charts.add(0, option)
        arcbarChart.setCoordinates({ xOffset: 0, yOffset: 0 })
        arcbarChart.draw()
    }
</script>

<style lang="scss">
    .flow-chart {
        width: 100%;
    }

    .chart-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .chart-canvas {
        width: 315rpx;
        height: 300rpx;
    }

    .chart-legend {
        flex: 1;
        padding-left: 20rpx;
    }

    .legend-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        &:last-child {
            margin-bottom: 0;
        }
 
        .legend-left {
            flex-direction: row;
            align-items: center;
        }
 
        .legend-right {
            flex-direction: row;
            align-items: center;
        }
    }

    .legend-color {
        width: 24rpx;
        height: 24rpx;
        border-radius: 4rpx;
        margin-right: 12rpx;
    }

    .legend-name {
        font-size: 26rpx;
        color: #333333;
        margin-right: 8rpx;
    }

    .legend-value {
        font-size: 26rpx;
        color: #666666;
        font-weight: bold;
    }
</style>