新手必看！轻松上手echarts地图图表，5个实用案例教你绘制中国地图

案例一：中国地图基础绘制

1.1 准备工作

首先，你需要确保你的项目中已经引入了 ECharts 库。你可以从 ECharts 的官方网站下载或使用 CDN 链接引入。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

1.2 创建基本地图

接下来，我们创建一个基本的地图图表。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

1.3 代码解析

echarts.init：初始化 ECharts 实例。
option：定义图表的配置项。
visualMap：视觉映射组件，用于调整颜色映射范围。
series：图表系列，包含地图系列配置。
mapType: 'china'：指定地图类型为中国地图。
roam: true：开启鼠标缩放和平移。

案例二：自定义中国地图

2.1 数据准备

首先，你需要准备自定义地图的数据。这通常是一组包含地理坐标和自定义值的 JSON 数据。

var data = [
    {name: '北京', value: [116.46, 39.92]},
    {name: '上海', value: [121.48, 31.22]},
    // ... 其他省份数据
];

2.2 配置地图系列

在 series 配置中，使用自定义的地理坐标数据。

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: data
}]

2.3 代码解析

自定义地图数据通过 value 属性传入地理坐标。
通过调整 mapType 和 data，你可以绘制自定义的地图。

案例三：添加省份边界

3.1 地图边界数据

你需要获取中国省份的边界数据。ECharts 提供了一个在线数据服务，可以获取这些数据。

3.2 配置地图系列

在 series 配置中，添加省份边界数据。

series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: data,
    itemStyle: {
        areaColor: '#323c48',
        borderColor: '#111'
    },
    regions: [
        {name: '北京', itemStyle: {areaColor: '#f4e925'}},
        {name: '上海', itemStyle: {areaColor: '#f4e925'}},
        // ... 其他省份自定义样式
    ]
}]

3.3 代码解析

regions：自定义省份的样式。
itemStyle：省份的填充颜色和边框颜色。

案例四：添加热点数据

4.1 热点数据准备

准备一组包含热点位置和值的 JSON 数据。

var hotData = [
    {name: '北京', value: [116.46, 39.92, 100]},
    {name: '上海', value: [121.48, 31.22, 200]},
    // ... 其他热点数据
];

4.2 配置热点系列

在 series 配置中，添加热点系列。

series: [{
    name: '热点数据',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: hotData,
    rippleEffect: {
        brushType: 'stroke'
    },
    label: {
        show: true,
        position: 'right',
        formatter: '{b}'
    },
    itemStyle: {
        color: '#f4e925',
        shadowBlur: 10,
        shadowColor: '#333'
    }
}]

4.3 代码解析

effectScatter：散点图系列，用于显示热点数据。
rippleEffect：水波纹效果。
label：显示热点名称。

案例五：动态更新数据

5.1 动态数据源

创建一个动态数据源，用于更新图表数据。

var dataSource = [
    {name: '北京', value: Math.round(Math.random() * 1000)},
    {name: '上海', value: Math.round(Math.random() * 1000)},
    // ... 其他省份数据
];

5.2 动态更新图表

使用 setOption 方法动态更新图表数据。

myChart.setOption({
    series: [{
        data: dataSource
    }]
});

5.3 代码解析

setOption：更新图表配置项。
通过动态数据源更新 series 中的数据。

通过以上五个案例，你可以轻松上手使用 ECharts 绘制中国地图。记住，ECharts 提供了丰富的功能和选项，你可以根据自己的需求进行扩展和定制。祝你学习愉快！