【基于Echarts的地图可视化】

人工智能教学实践2025-07-04 7:04
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>中国牛只分布可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%;height:600px;"></div>
    <script>
        // 异步加载地图数据
        $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function(chinaJson) {
            var chart = echarts.init(document.getElementById('map'));
            echarts.registerMap('china', chinaJson);
            
            // 牛只分布数据
            var cattleData = [
                {name: '内蒙古', value: [111.76, 40.82, 280]},
                {name: '新疆', value: [87.62, 43.82, 190]},
                {name: '黑龙江', value: [126.53, 45.80, 150]},
                {name: '四川', value: [104.06, 30.67, 120]},
                {name: '云南', value: [102.73, 25.04, 90]}
            ];
            
            var option = {
                title: {
                    text: '中国主要牧区牛只分布',
                    subtext: '数据更新时间：2025-06-29',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        if(params.seriesType === 'scatter') {
                            return params.name + '<br/>存栏量: ' + params.value[2] + '万头';
                        }
                        return params.name;
                    }
                },
                visualMap: {
                    min: 0,
                    max: 300,
                    text: ['高', '低'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#1e90ff', '#ff4500']
                    }
                },
                geo: {
                    map: 'china',
                    roam: true,
                    label: {
                        show: true,
                        color: '#333',
                        fontSize: 10
                    },
                    emphasis: {
                        label: {
                            color: '#fff'
                        },
                        itemStyle: {
                            areaColor: '#389af4'
                        }
                    },
                    itemStyle: {
                        areaColor: '#e6f7ff',
                        borderColor: '#aaa'
                    }
                },
                series: [{
                    name: '牛只数量',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: function(val) {
                        return Math.sqrt(val[2]) * 3;
                    },
                    data: cattleData,
                    encode: {
                        value: 2
                    },
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        color: '#d63031'
                    }
                }]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', chart.resize);
        });
    </script>
</body>
</html>