echarts地图（中国地图展示各省数据）

最新推荐文章于 2025-07-21 15:43:22 发布

原创最新推荐文章于 2025-07-21 15:43:22 发布 · 1.3w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#echarts中国地图 #echarts地图插入图片

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

echarts使用

4 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并配置ECharts中国地图，包括npm安装、地图初始化及option配置项详解，助您快速实现地图数据可视化。

最终效果：
在这里插入图片描述
1.引入：
npm i echarts --save
main.js中：
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
2.地图初始化：
使用地图的文件中（map.vue）：
import ‘echarts/map/js/china.js’

methods:{
    drawMap() {
      var chinaChart = this.$echarts.init(
        document.getElementById("mapContain")
      );
      chinaChart.setOption(this.option);
    }
}
mounted(){
	this.drawMap()
}

地图初始化完成，中国地图就有了。
3.option配置项
在这里插入图片描述

      option: {
        tooltip:{//鼠标移上去时显示悬浮框
            backgroundColor:'transparent',//悬浮框最外层设置了默认padding;5,背景色灰色，如果要自定义，设置padding:0;或者背景色透明。
            padding:0,
            trigger:'item'//设置该属性之后，会与series中data数据对应，如上图。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
            // formatter:(params)=>{
            let obj = {img:require('../../assets/images/weather/湿度.png')}
            //     return `<div class="test">${params.name}<img src=${obj.img}><div>`//模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。
            // },
        },
        series: [
          {
            name: "国内天气",
            type: "map",
            mapType: "china",
            roam: false,
            zoom:1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
            itemStyle:{
                areaColor:'#AAD5FF',//地图区域背景颜色
                borderColor:'#fff'//地图边界颜色
            },
            emphasis:{//高亮时的设置
                itemStyle:{
                    areaColor:'#81B5F9',//高亮时地图区域背景颜色
                },
                label:{//文字颜色，样式在此处
                    color:'rgb(230, 102, 18)',
                    fontSize:'15'
                }
            },
            label: {
              normal: {
                show: true
              },
            
            },
           
            data: [
              { name: "北京", value: Math.round(Math.random() * 1000) },
              { name: "天津", value: Math.round(Math.random() * 1000) },
              { name: "上海", value: Math.round(Math.random() * 1000) },
              { name: "重庆", value: Math.round(Math.random() * 1000) },
              { name: "河北", value: Math.round(Math.random() * 1000) },
              { name: "河南", value: Math.round(Math.random() * 1000) },
              { name: "云南", value: Math.round(Math.random() * 1000) },
              { name: "辽宁", value: Math.round(Math.random() * 1000) },
              { name: "黑龙江", value: Math.round(Math.random() * 1000) },
              { name: "湖南", value: Math.round(Math.random() * 1000) },
              { name: "安徽", value: Math.round(Math.random() * 1000) },
              { name: "山东", value: Math.round(Math.random() * 1000) },
              { name: "新疆", value: Math.round(Math.random() * 1000) },
              { name: "江苏", value: Math.round(Math.random() * 1000) },
              { name: "浙江", value: Math.round(Math.random() * 1000) },
              { name: "江西", value: Math.round(Math.random() * 1000) },
              { name: "湖北", value: Math.round(Math.random() * 1000) },
              { name: "广西", value: Math.round(Math.random() * 1000) },
              { name: "甘肃", value: Math.round(Math.random() * 1000) },
              { name: "山西", value: Math.round(Math.random() * 1000) },
              { name: "内蒙古", value: Math.round(Math.random() * 1000) },
              { name: "陕西", value: Math.round(Math.random() * 1000) },
              { name: "吉林", value: Math.round(Math.random() * 1000) },
              { name: "福建", value: Math.round(Math.random() * 1000) },
              { name: "贵州", value: Math.round(Math.random() * 1000) },
              { name: "广东", value: Math.round(Math.random() * 1000) },
              { name: "青海", value: Math.round(Math.random() * 1000) },
              { name: "西藏", value: Math.round(Math.random() * 1000) },
              { name: "四川", value: Math.round(Math.random() * 1000) },
              { name: "宁夏", value: Math.round(Math.random() * 1000) },
              { name: "海南", value: Math.round(Math.random() * 1000) },
              { name: "台湾", value: Math.round(Math.random() * 1000) },
              { name: "香港", value: Math.round(Math.random() * 1000) },
              { name: "澳门", value: Math.round(Math.random() * 1000) }
            ]
          }
        ]
      }

如果有其他需求请参考echarts文档series,地图的配置项全在series里，选择type:map.