vue+echarts绘制中国地图，动态配置省份颜色和城市标点

最新推荐文章于 2024-07-08 16:44:51 发布

江南小雪

最新推荐文章于 2024-07-08 16:44:51 发布

阅读量5.5k

点赞数 2

分类专栏： javaScript 文章标签： vue.js javascript echarts

本文链接：https://blog.csdn.net/qq_38655872/article/details/117248131

版权

本文介绍了如何结合Vue.js和Echarts实现动态配置中国地图的省份颜色以及城市标点的绘制。通过设置地图容器、地图尺寸、引入地图数据，注册并初始化Echarts，以及配置地图项和点击事件，最终实现在点击地名时跳转至详情页面的效果。文章还包含了代码注释以解释关键配置步骤。

摘要由CSDN通过智能技术生成

最近做了一个需求，是绘制中国地图，要动态配置省份颜色和城市标点。写下这篇文章记录一下。

话不多说，上代码。

1、先写地图容器

 <div id="mapWrap"></div>

2、设置容器的宽高度

#mapWrap{
  height: 100%;
  width: 100%
}

3、引入echarts、中国地图json

import echarts from 'echarts'
import '../../../../node_modules/echarts/map/js/china'
import chinaJson from '../../../../node_modules/echarts/map/json/china.json'

4、注册地图，初始化echarts

 echarts.registerMap('china', chinaJson) // 注册地图
 var mapChart = echarts.init(document.getElementById('mapWrap'))

5、配置地图配置项（最关键一步），详细配置说明都在代码里注释了

var option = {
        geo: { // 公共样式
          map: 'china',
          label: {
            normal: {
              show: false, // 显示省份标签
              textStyle: {
                color: '#000'
              } // 省份标签字体颜色
            }
          },
          itemStyle: {
            normal: {
              label: {show: false},
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#000', // 区域边框颜色
              areaColor: '#2E75B6' // 区域颜色
            }
          },
          emphasis: {
            label: {show: false},
            areaColor: '#F6C9AB' // 区域颜色
          }