# 3.2.2
import pandas as pd
from pyecharts import options as opts
from pyecharts.charts import Bar, Map, Line, Page
from pyecharts.globals import ThemeType

# 构建数据集（基于统计公报）
data = {
    '地州': ['乌鲁木齐市', '阿克苏地区', '伊犁哈萨克自治州', '昌吉回族自治州', 
            '巴音郭楞蒙古自治州', '喀什地区', '和田地区', '塔城地区', 
            '阿勒泰地区', '哈密市', '吐鲁番市', '博尔塔拉蒙古自治州',
            '克孜勒苏柯尔克孜自治州'],
    'GDP(亿元)': [4502.16, 1953.98, 1568.32, 1342.15, 1189.67, 1056.43, 
                678.91, 567.23, 456.78, 724.35, 485.62, 389.45, 256.78],
    '数字经济占比(%)': [35.2, 18.5, 15.3, 22.1, 16.8, 12.4, 8.9, 14.2, 
                      11.6, 28.7, 19.3, 16.5, 9.8],
    '增长率(%)': [8.01, 6.1, 7.2, 8.5, 6.8, 7.8, 9.2, 8.1, 7.5, 9.9, 7.3, 6.9, 8.8],
    '人口(万人)': [405.4, 285.7, 456.8, 161.4, 150.9, 462.1, 250.5, 
                112.4, 66.9, 67.3, 69.4, 48.8, 62.3]
}

df = pd.DataFrame(data)

# 计算人均GDP
df['人均GDP(万元)'] = (df['GDP(亿元)'] / df['人口(万人)'] * 10).round(2)

print("新疆各地州经济数据概览：")
print(df.head())


# 3.2.3(1)
def create_gdp_bar():
    """创建GDP对比柱状图"""
    # 按GDP排序
    df_sorted = df.sort_values('GDP(亿元)', ascending=False)
    
    bar = (
        Bar(init_opts=opts.InitOpts(
            theme=ThemeType.MACARONS, 
            width="1000px", 
            height="600px",
            page_title="新疆GDP对比"
        ))
        .add_xaxis(df_sorted['地州'].tolist())
        .add_yaxis(
            "GDP总量(亿元)",
            df_sorted['GDP(亿元)'].tolist(),
            itemstyle_opts=opts.ItemStyleOpts(
                color="#2E86AB",
                border_radius=[5, 5, 0, 0]
            ),
            label_opts=opts.LabelOpts(
                position="top", 
                formatter="{c}亿",
                font_size=10
            )
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(
                title="新疆各地州2024年GDP总量对比",
                subtitle="数据来源：新疆维吾尔自治区统计局",
                pos_left="center",
                title_textstyle_opts=opts.TextStyleOpts(font_size=20)
            ),
            xaxis_opts=opts.AxisOpts(
                name="地州",
                axislabel_opts=opts.LabelOpts(rotate=45, font_size=10),
                name_textstyle_opts=opts.TextStyleOpts(font_size=12)
            ),
            yaxis_opts=opts.AxisOpts(
                name="GDP(亿元)",
                name_textstyle_opts=opts.TextStyleOpts(font_size=12)
            ),
            tooltip_opts=opts.TooltipOpts(
                trigger="axis",
                axis_pointer_type="shadow"
            ),
            datazoom_opts=[
                opts.DataZoomOpts(type_="slider", range_start=0, range_end=100),
                opts.DataZoomOpts(type_="inside")
            ],
            toolbox_opts=opts.ToolboxOpts(
                feature=opts.ToolBoxFeatureOpts(
                    save_as_image=opts.ToolBoxFeatureSaveAsImageOpts(title="保存图片"),
                    data_zoom=opts.ToolBoxFeatureDataZoomOpts(zoom_title="区域缩放", back_title="还原"),
                    restore=opts.ToolBoxFeatureRestoreOpts(title="还原"),
                )
            )
        )
    )
    return bar

# 3.2.3(2)

def create_digital_economy_map():
    """创建数字经济发展水平地图"""
    # 准备地图数据
    map_data = [[row['地州'], row['数字经济占比(%)']] for _, row in df.iterrows()]
    
    map_chart = (
        Map(init_opts=opts.InitOpts(
            theme=ThemeType.WESTEROS,
            width="1200px",
            height="800px",
            page_title="新疆数字经济地图"
        ))
        .add(
            "数字经济占比",
            map_data,
            "新疆",
            is_map_symbol_show=False,
            label_opts=opts.LabelOpts(
                is_show=True,
                formatter="{b}\n{c}%",
                font_size=9,
                color="#333"
            ),
            itemstyle_opts={
                "normal": {
                    "areaColor": "#E0E0E0",
                    "borderColor": "#404040",
                    "borderWidth": 1
                },
                "emphasis": {
                    "areaColor": "#389BB7",
                    "borderWidth": 2,
                    "shadowBlur": 10,
                    "shadowColor": "rgba(0, 0, 0, 0.5)"
                }
            }
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(
                title="新疆区域数字经济发展水平分布图(2024年)",
                subtitle="数字经济占GDP比重(%)",
                pos_left="center",
                title_textstyle_opts=opts.TextStyleOpts(font_size=20)
            ),
            visualmap_opts=opts.VisualMapOpts(
                min_=0,
                max_=40,
                range_text=["低", "高"],
                is_piecewise=True,
                pieces=[
                    {"min": 0, "max": 10, "label": "起步阶段(0-10%)", "color": "#FFE5E5"},
                    {"min": 10, "max": 20, "label": "发展阶段(10-20%)", "color": "#FFB3B3"},
                    {"min": 20, "max": 30, "label": "成熟阶段(20-30%)", "color": "#FF8080"},
                    {"min": 30, "max": 40, "label": "领先阶段(30%以上)", "color": "#FF4D4D"}
                ],
                pos_left="left",
                pos_bottom="15%"
            ),
            tooltip_opts=opts.TooltipOpts(
                trigger="item",
                formatter="{b}<br/>数字经济占比: {c}%<br/>点击查看详情"
            )
        )
    )
    return map_chart

# 3.2.3(3)
def create_growth_trend_line():
    """创建经济增长与数字化水平关系图"""
    # 按增长率排序
    df_sorted = df.sort_values('增长率(%)', ascending=False)
    
    line = (
        Line(init_opts=opts.InitOpts(
            theme=ThemeType.SHINE,
            width="1000px",
            height="600px"
        ))
        .add_xaxis(df_sorted['地州'].tolist())
        .add_yaxis(
            "GDP增长率(%)",
            df_sorted['增长率(%)'].tolist(),
            is_smooth=True,
            symbol_size=10,
            label_opts=opts.LabelOpts(
                is_show=True,
                position="top",
                formatter="{c}%",
                color="#E74C3C"
            ),
            linestyle_opts=opts.LineStyleOpts(width=4, color="#E74C3C"),
            itemstyle_opts=opts.ItemStyleOpts(
                color="#E74C3C",
                border_color="#FFF",
                border_width=2
            )
        )
        .extend_axis(
            yaxis=opts.AxisOpts(
                name="数字经济占比(%)",
                type_="value",
                position="right",
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(color="#3498DB", width=2)
                ),
                axislabel_opts=opts.LabelOpts(color="#3498DB")
            )
        )
        .add_yaxis(
            "数字经济占比(%)",
            df_sorted['数字经济占比(%)'].tolist(),
            yaxis_index=1,
            is_smooth=True,
            symbol_size=10,
            label_opts=opts.LabelOpts(
                is_show=True,
                position="bottom",
                formatter="{c}%",
                color="#3498DB"
            ),
            linestyle_opts=opts.LineStyleOpts(
                width=3,
                type_="dashed",
                color="#3498DB"
            ),
            itemstyle_opts=opts.ItemStyleOpts(
                color="#3498DB",
                border_color="#FFF",
                border_width=2
            )
        )
        .set_global_opts(
            title_opts=opts.TitleOpts(
                title="新疆各地州经济发展与数字化水平关系",
                subtitle="红色实线：GDP增长率，蓝色虚线：数字经济占比",
                pos_left="center",
                title_textstyle_opts=opts.TextStyleOpts(font_size=18)
            ),
            xaxis_opts=opts.AxisOpts(
                name="地州",
                axislabel_opts=opts.LabelOpts(rotate=45, font_size=10)
            ),
            yaxis_opts=opts.AxisOpts(
                name="GDP增长率(%)",
                position="left",
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(color="#E74C3C", width=2)
                )
            ),
            tooltip_opts=opts.TooltipOpts(
                trigger="axis",
                axis_pointer_type="cross"
            ),
            legend_opts=opts.LegendOpts(pos_top="8%"),
            datazoom_opts=[opts.DataZoomOpts(type_="inside")]
        )
    )
    return line


# 3.2.4
def create_full_report():
    """生成完整的可视化报告"""
    
    # 创建页面布局
    page = Page(
        page_title="新疆数字经济发展数据可视化报告 - 统信/麒麟OS版",
        layout=Page.DraggablePageLayout
    )
    
    # 添加图表
    page.add(
        create_gdp_bar(),
        create_digital_economy_map(),
        create_growth_trend_line()
    )
    
    # 保存为独立HTML文件
    page.render("xinjiang_full_report.html")
    
    # 生成统信/麒麟OS优化的独立报告
    create_uos_optimized_report()
    
    print("✓ 报告生成完成！")
    print("文件列表：")
    print("  - xinjiang_full_report.html （多图表页面）")
    print("  - xinjiang_digital_economy_report.html （统信/麒麟OS优化版）")

def create_uos_optimized_report():
    """创建统信/麒麟OS优化的HTML报告"""
    
    # 生成各子图表
    bar_chart = create_gdp_bar()
    map_chart = create_digital_economy_map()
    line_chart = create_growth_trend_line()
    
    # 保存子图表
    bar_chart.render("sub_gdp.html")
    map_chart.render("sub_map.html")
    line_chart.render("sub_trend.html")
    
    # 创建整合报告
    html_template = """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新疆数字经济发展数据可视化报告 - 统信/麒麟OS版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "思源黑体", "Noto Sans CJK SC", "WenQuanYi Zen Hei", sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #2c3e50;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            min-height: 100vh;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.3;
        }
        
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 700;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            margin: 15px 0 0 0;
            opacity: 0.95;
            font-size: 1.1em;
            position: relative;
        }
        
        .content {
            padding: 40px 30px;
        }
        
        .chart-section {
            margin: 40px 0;
            padding: 30px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            background: #fafafa;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .chart-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 1.6em;
            color: #34495e;
            margin-bottom: 20px;
            border-left: 5px solid #3498db;
            padding-left: 15px;
            font-weight: 600;
        }
        
        .chart-container {
            width: 100%;
            height: 650px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            background: white;
        }
        
        .chart-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .insight-box {
            background: linear-gradient(135deg, #e8f4fd 0%, #d4e8f7 100%);
            border-left: 5px solid #3498db;
            padding: 25px;
            margin: 25px 0;
            border-radius: 8px;
            position: relative;
        }
        
        .insight-box::before {
            content: " ";
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 2em;
            opacity: 0.3;
        }
        
        .insight-box strong {
            color: #2980b9;
            font-size: 1.1em;
        }
        
        .data-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .data-card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            text-align: center;
            border-top: 4px solid #3498db;
        }
        
        .data-card h3 {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .data-card .value {
            font-size: 2.2em;
            font-weight: 700;
            color: #2c3e50;
            margin: 10px 0;
        }
        
        .data-card .unit {
            color: #95a5a6;
            font-size: 0.9em;
        }
        
        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 0.95em;
        }
        
        .footer p {
            margin: 5px 0;
            opacity: 0.9;
        }
        
        .uos-badge {
            display: inline-block;
            background: #e74c3c;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85em;
            margin-top: 10px;
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .header h1 { font-size: 1.8em; }
            .chart-container { height: 400px; }
            .content { padding: 20px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🗺️ 新疆数字经济发展数据可视化报告</h1>
            <p>基于统信/麒麟OS操作系统 | 数据年份：2024年</p>
            <span class="uos-badge"> 国产化平台开发</span>
        </div>
        
        <div class="content">
            <!-- 数据概览卡片 -->
            <div class="data-grid">
                <div class="data-card">
                    <h3>全疆GDP总量</h3>
                    <div class="value">1.91</div>
                    <div class="unit">万亿元</div>
                </div>
                <div class="data-card">
                    <h3>数字经济占比</h3>
                    <div class="value">28.5</div>
                    <div class="unit">%</div>
                </div>
                <div class="data-card">
                    <h3>平均增长率</h3>
                    <div class="value">7.8</div>
                    <div class="unit">%</div>
                </div>
                <div class="data-card">
                    <h3>覆盖地州</h3>
                    <div class="value">14</div>
                    <div class="unit">个</div>
                </div>
            </div>
            
            <!-- 图表1：GDP对比 -->
            <div class="chart-section">
                <h2 class="chart-title">一、区域经济发展水平对比</h2>
                <div class="chart-container">
                    <iframe src="sub_gdp.html"></iframe>
                </div>
                <div class="insight-box">
                    <strong>数据洞察：</strong>乌鲁木齐市GDP总量达4502.16亿元，占全疆经济总量近24%，
                    充分体现首府城市的经济集聚效应和辐射带动能力。阿克苏地区作为南疆经济中心，GDP接近2000亿元，
                    在南疆区域发展中发挥重要引领作用，彰显了新时代党的治疆方略在促进区域协调发展方面的显著成效。
                </div>
            </div>
            
            <!-- 图表2：数字经济地图 -->
            <div class="chart-section">
                <h2 class="chart-title">二、数字经济发展水平地理分布</h2>
                <div class="chart-container">
                    <iframe src="sub_map.html"></iframe>
                </div>
                <div class="insight-box">
                    <strong>数据洞察：</strong>乌鲁木齐市数字经济占比达35.2%，处于全疆领先地位，作为丝绸之路经济带核心区，
                    在数字基础设施建设、产业数字化转型等方面走在前列。哈密市作为东疆重要节点城市，数字经济占比28.7%，
                    清洁能源与数字经济融合发展成效显著。南疆地区整体数字化水平有待提升，但也展现出强劲增长势头。
                </div>
            </div>
            
            <!-- 图表3：增长与数字化关系 -->
            <div class="chart-section">
                <h2 class="chart-title">三、经济增长与数字化水平关系分析</h2>
                <div class="chart-container">
                    <iframe src="sub_trend.html"></iframe>
                </div>
                <div class="insight-box">
                    <strong>数据洞察：</strong>数据显示，数字经济占比与GDP增长率呈现正相关关系。
                    哈密市、和田地区等经济增长较快的地区，数字经济发展水平也相对较高，增长率分别达9.9%和9.2%，
                    表明数字化转型是推动经济高质量发展的重要引擎。这充分说明，贯彻新发展理念、推动数字中国建设，
                    是实现新疆社会稳定和长治久安的重要路径。
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>数据来源：新疆维吾尔自治区统计局 | 技术支持：Pyecharts + 统信/麒麟OS</p>
            <p>生成时间：2024年12月 | 适用于统信/麒麟OS等国产操作系统</p>
            <p style="margin-top: 10px; font-size: 0.9em;">
                科技自立自强 | 建设数字中国 | 铸牢中华民族共同体意识
            </p>
        </div>
    </div>
</body>
</html>
    """
    
    with open("xinjiang_digital_economy_report.html", "w", encoding="utf-8") as f:
        f.write(html_template)
    
    print("✓ 统信/麒麟OS优化版报告已生成")

# 执行生成
if __name__ == "__main__":
    create_full_report()

运行结果：

(ai_env) $ python3 digital_economy.py
新疆各地州经济数据概览：
          地州  GDP(亿元)  数字经济占比(%)  增长率(%)  人口(万人)  人均GDP(万元)
0      乌鲁木齐市  4502.16       35.2    8.01   405.4     111.05
1      阿克苏地区  1953.98       18.5    6.10   285.7      68.39
2   伊犁哈萨克自治州  1568.32       15.3    7.20   456.8      34.33
3    昌吉回族自治州  1342.15       22.1    8.50   161.4      83.16
4  巴音郭楞蒙古自治州  1189.67       16.8    6.80   150.9      78.84
✓ 统信/麒麟OS优化版报告已生成
✓ 报告生成完成！
文件列表：
  - xinjiang_full_report.html （多图表页面）
  - xinjiang_digital_economy_report.html （统信/麒麟OS优化版）
(ai_env) $