python_weather/web/js/chart32.js

function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb2'));

    var data = Chart32_Data;

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '空气质量地区排行',
            // subtext: '数据来源：环保局',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: '16'
            }
        },
        tooltip: {
            trigger: 'item',
            position: function (p) {   //其中p为当前鼠标的位置
                return [p[0] + 60, p[1] - 70];
            },
            formatter: function (params) {
                var dataItem = data.find(item => item.name === params.name);
                var value = `${dataItem.name}: ${params.value} (${params.percent}%) <br>`;

                dataItem.degree.forEach((v, index) => {
                    value += `${v}  `;
                    if (index % 3 === 1) {
                        value += '<br>';
                    }
                });

                return value; // 动态遍历数据显示地区、天气和百分比
            }
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: '70%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: '12',
            },
            // data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染'],

        },
        series: [
            {
                name: '空气质量',
                type: 'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],

                data: data.map(item => ({
                    value: item.value,
                    name: item.name,
                    itemStyle: {color: item.color},
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{b}: {c}' // 显示地区名称和天气数据

                    },
                })),
                emphasis: {
                    itemStyle: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                }
                // itemStyle: {
                //     color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6', '#0fc8d6'] // 添加更多的颜色
                // }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}