vue3 echarts 地图统计分布

### 实现 ECharts 地图统计分布可视化 #### 安装依赖库 为了在 Vue3 项目中集成并使用 ECharts 进行地图数据的可视化，需先通过 npm 命令安装 echarts 库[^1]。 ```bash npm install echarts --save ``` #### 创建组件结构 创建一个新的 Vue 组件用于承载图表逻辑，在此假设该文件名为 `MapChart.vue`。确保按照标准方式引入必要的模块： ```javascript // MapChart.vue <template> <div ref="chartContainer" style="width: 600px; height: 400px;"></div> </template> <script setup> import * as echarts from 'echarts'; import { onMounted, ref } from 'vue'; const chartContainer = ref(null); onMounted(() => { let myChart = echarts.init(chartContainer.value); // 初始化配置项... }); </script> ``` #### 加载中国省份 JSON 数据 为了让 ECharts 正确渲染特定区域的地图，需要加载对应地区的地理坐标信息。对于中国大陆地区而言，可以利用官方提供的 geoJSON 文件来完成这一操作[^2]。 ```javascript fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json') .then(response => response.json()) .then(geoJsonData => { echarts.registerMap('china', geoJsonData); }) .catch(error => console.error('Failed to load map data:', error)); ``` #### 配置图表选项 设置好基本布局之后，定义具体的绘图参数，包括但不限于颜色方案、标记样式以及交互行为等特性。这里给出一个简单的例子说明如何显示不同城市的气温情况[^3]: ```javascript let option = { title: { text: '全国主要城市平均温度', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 50, left: 'left', top: 'bottom', text: ['高','低'], calculable: true }, series : [ { name: '温度', type: 'map', roam: false, mapType: 'china', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name:'北京',value:Math.round(Math.random()*50)}, {name:'天津',value:Math.round(Math.random()*50)}, ... ] } ] }; myChart.setOption(option); ```