no message

2025-03-05 13:19:48 +08:00 · 2025-03-05 13:19:48 +08:00 · a535541d9c
parent aed3919aee
commit a535541d9c
1 changed files with 0 additions and 100 deletions
--- a/src/components/baozuo-demo/text.html
+++ b/src/components/baozuo-demo/text.html
@ -1,100 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>科技蓝饼图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
 </head>
 <body>
    <div id="main" style="width: 800px;height:500px;"></div>
    <script>
        // 数据配置
        const data = [
            { value: 335, name: '数据A' },
            { value: 310, name: '数据B' },
            { value: 234, name: '数据C' },
            { value: 135, name: '数据D' }
        ];
        // 计算总数
        const total = data.reduce((sum, item) => sum + item.value, 0);
        console.log(echarts)
        // 初始化图表
        const chart = echarts.init(document.getElementById('main'));
        // 配置项
        const option = {
            // 科技蓝背景
            backgroundColor: '#001F3F',
            // 图形元素（中间总计）
            graphic: {
                elements: [{
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: total.toString(),
                        fill: '#fff',
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                },{
                    type: 'text',
                    left: 'center',
                    top: '55%',
                    style: {
                        text: '总计',
                        fill: '#7EC8E3',
                        fontSize: 16
                    }
                }]
            },
            // 颜色配置（科技感配色）
            color: ['#00FFFF', '#1E90FF', '#00BFFF', '#7FFFAA'],
            // 饼图系列配置
            series: [{
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['30%', '50%'],  // 饼图靠左
                label: { show: false },    // 隐藏默认标签
                data: data,
                itemStyle: {
                    borderColor: '#001F3F',
                    borderWidth: 3
                }
            }],
            // 右侧图例配置
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 'center',
                itemGap: 20,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                formatter: (name) => {
                    const value = data.find(item => item.name === name).value;
                    return `${name}  ${value} (${((value/total)*100).toFixed(1)}%)`;
                }
            },
            // 标题样式
            title: {
                text: '数据分布图',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                }
            }
        };
        chart.setOption(option);
    </script>
 </body>
 </html>