地图可视化 Choropleth Map

import * as echarts from 'echarts';

// 1. 加载中国地图 GeoJSON
const geoJson = await fetch(
    'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
).then(res => res.json());

// 2. 注册地图
echarts.registerMap('china', geoJson);

// 3. 准备数据
const data = [
    { name: '广东', value: 8650 },
    { name: '江苏', value: 7820 },
    { name: '浙江', value: 6540 },
    // ... more provinces
];

// 4. 配置图表
const option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 万元'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        bottom: 20,
        inRange: {
            color: ['#E8F4FD', '#5B8FF9']
        },
        text: ['高', '低'],
    },
    series: [{
        type: 'map',
        map: 'china',
        roam: true,
        emphasis: {
            itemStyle: {
                areaColor: '#5B8FF9',
                shadowColor: 'rgba(0,113,227,0.5)',
                shadowBlur: 20,
            }
        },
        data: data
    }]
};

chart.setOption(option);