echarts使用echarts地图

### 如何使用 ECharts 地图组件

#### 组件创建与基本配置
为了在 Vue 项目中使用 ECharts 的地图功能，需先安装 `echarts` 库[^2]。

npm install echarts

或

yarn add echarts

接着，在Vue单文件组件内定义模板部分：

<template>
    <div ref="chart" style="width: 100%; height: 600px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

const chart = ref(null);

onMounted(() => {
    const myChart = echarts.init(chart.value);
    
    // 初始化图表选项为空对象
    let option = {};
    
    // 设置图表的配置项和数据
    myChart.setOption(option);
});
</script>

此段代码展示了如何构建一个基础的地图展示区域，并通过 JavaScript 动态初始化 ECharts 实例来渲染地图[^1]。

#### 加载地理坐标系插件并导入地图数据
为了让 ECharts 支持显示特定地区的地图，还需要加载相应的地理坐标系插件以及该地区具体的矢量地图数据。这通常涉及到调用 `registerMap()` 方法向 ECharts 注册新的地图实例。

假设要绘制中国省份级别的地图，则可以按照如下方式操作：

// 假设已获取到名为 china.json 的 JSON 文件作为中国的地图数据源
fetch('/path/to/china.json')
    .then(response => response.json())
    .then(chinaJson => {
        echarts.registerMap('China', chinaJson); // 向 ECharts 注册 "China" 这张地图
        
        // 更新option中的series属性以指定使用的地图名称
        option.series.push({
            type: 'map',
            map: 'China'
        });
        
        myChart.setOption(option);
    })
    .catch(error => console.error('Error loading China map:', error));

这段脚本说明了怎样异步请求外部的地图JSON资源，并将其注册给 ECharts 使用，从而使得后续可以在绘图时引用这些自定义的地图[^4]。

#### 配置样式和其他参数
最后一步是对地图外观及其他行为特性做进一步定制化调整，比如颜色渐变、标记点位置等细节都可以在此阶段完成设置。以下是几个常见的可选配置项示例：

- **视觉映射 (visualMap)**：用于表示数值范围的颜色变化效果；
- **系列列表 (series)**：包含具体的数据集及其可视化形式（此处即为地图类型）；

完整的配置可能看起来像这样：

let option = {
    tooltip : {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        text: ['High','Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['#e0ffff','#006edd']
        }
    },
    series : [
        {
            name: 'Some Data',
            type: 'map',
            roam: true,
            map: 'China',
            data:[
                {name:'Beijing',value:Math.round(Math.random()*1000)},
                ...
            ]
        }
    ]
};
myChart.setOption(option);

上述例子中包含了对提示信息、色彩过渡区间及实际数据显示等方面的设定[^3]。