[其他] vue3 使用 echarts 展示某省份各区市数据 [推广有奖]

0关注
0粉丝

等待验证会员

学前班

80%

还不是VIP/贵宾

-

0%

威望: 0 级
论坛币: 0 个
通用积分: 0
学术水平: 0 点
热心指数: 0 点
信用等级: 0 点
经验: 30 点
帖子: 2
精华: 0
在线时间: 0 小时
注册时间: 2018-10-7
最后登录: 2018-10-7

楼主

庄奕才 发表于 2025-11-26 10:32:30 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

在 Vue3 项目中使用 ECharts 展示某一省份内各城市的地理数据，是一种常见且直观的数据可视化方式。本文以辽宁省为例，展示如何通过 ECharts 渲染省级地图，并加载各区市的数值数据。

实现过程并不复杂，核心在于正确引入地图的 GeoJSON 数据并配置 ECharts 的地图系列选项。以下是完整的实现代码：

<template>
<div class="ed-map-div">
  <div class="ed-map-model" ref="echartRef"></div>
</div>
</template>

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

const echartRef = ref(null)
const actBtn = ref(0)
let echartInstance = null

let option = {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  visualMap: {
    min: 0,
    max: 700,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true,
    inRange: {
      color: ['#e0f3ff', '#0066cc']
    }
  },
  series: [{
    type: 'map',
    map: '辽宁',
    roam: true,
    label: {
      show: true,
      color: '#FFF',
      fontSize: 14,
      fontWeight: 'bold',
      fontFamily: '微软雅黑'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 14,
        color: '#FFF',
        fontWeight: 'bold'
      },
      itemStyle: {
        areaColor: '#ffcc00'
      }
    },
    data: [
      { value: 650, name: '沈阳市' },
      { value: 450, name: '大连市' },
      { value: 420, name: '鞍山市' },
      { value: 400, name: '抚顺市' },
      { value: 500, name: '本溪市' },
      { value: 600, name: '丹东市' },
      { value: 700, name: '铁岭市' },
      { value: 700, name: '阜新市' },
      { value: 700, name: '锦州市' },
      { value: 700, name: '朝阳市' },
      { value: 700, name: '盘锦市' },
      { value: 700, name: '葫芦岛市' },
      { value: 700, name: '营口市' },
      { value: 700, name: '辽阳市' }
    ]
  }]
}

onMounted(() => {
  echartInstance = echarts.init(echartRef.value)

  import('../../json/210000.json').then(mapJson => {
    echarts.registerMap('辽宁', mapJson)
    echartInstance.setOption(option)
  }).catch(error => {
    console.error('加载地图数据失败:', error)
  })

  window.addEventListener('resize', () => {
    echartInstance.resize()
  })
})
</script>

<style scoped lang="scss">
.ed-map-div {
  width: 100%;
  height: 100%;
  position: relative;
  .ed-map-model {
    width: 100%;
    height: 100%;
  }
}
</style>

"echarts": "^6.0.0"

上述代码中，ECharts 使用的是当前最新版本。关键步骤包括：

通过 ref 获取 DOM 元素用于初始化图表实例；
在 onMounted 钩子中动态导入对应省份的 GeoJSON 文件（如 210000.json 代表辽宁省）；
使用 echarts.registerMap 注册地图数据；
调用 setOption 渲染地图，并设置视觉映射（visualMap）来体现数据差异；
添加窗口 resize 监听，确保图表响应式自适应容器大小。

所需的地图 GeoJSON 文件可从以下平台获取：

阿里云 DataV 地图选择器提供全国各级行政区划的 JSON 数据下载，访问地址为：
https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=26.30662600587793&lng=118.28348353816342&zoom=7.5

进入网站后，选择目标省份即可下载对应的 JSON 文件，建议将其放置于项目的静态资源目录下（如 src/json/），并通过动态 import 加载。