echarts显示省份地图

### 使用 ECharts 显示中国省份地图

为了在网页上展示中国的省份地图，可以利用 `ECharts` 提供的地图功能。具体操作如下：

#### 创建 HTML 页面并引入 ECharts 库
首先，在HTML文件中通过 `<script>` 标签加载 echarts.js 文件，并准备一个用于渲染图表的容器，比如 div 元素。

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

#### 初始化 ECharts 实例
接着，在 JavaScript 部分初始化一个新的 ECharts 实例并与之前定义好的 DOM 对象关联起来。

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

#### 设置配置项来绘制特定省区的地图
要显示某个具体的省级行政区划，则需指定该地区的地理编码作为参数传递给 option 的 series 中 geoComponentOption.regions 属性下的 map 字段[^1]。

option = {
    title: {
        text: '某省地图',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    visualMap: {
        min: 8000,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['#e0ffff','#006edd']
        }
    },
    series: [
        {
            name: '某省',
            type: 'map',
            mapType: '广东',//此处填写想要查看的具体省份名称, 如'北京','上海'等
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            }
        }
    ]
};
myChart.setOption(option);

上述代码片段展示了如何使用 ECharts 来呈现广东省的地图；如果希望切换到其他省份，只需更改 `series.mapType` 的值即可[^2]。