关键词：

第一种效果：不同省份颜色不同

代码：
注意：
①要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来；
②一定要有visualMap配置，并且它的seriesIndex属性 对应的是series的数组下标；

<template>
    <div class="echartsMapAllDemo">
        <!-- style的宽高一定要写，不写也不会展示echarts图 -->
        <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div>
    </div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default 
  data() 
    return ;
  ,
  mounted() 
    this.chinaEcharts();
  ,
  methods: 
    chinaEcharts() 
      //1.注册一个地图
      this.$echarts.registerMap("china", chinaJson);

      //2.初始化echarts
      let myChart = this.$echarts.init(this.$refs.myEcharts);
    
      // 3.准备数据
      var data = [
         name: "北京", value: 177 ,
         name: "天津", value: 42 ,
         name: "河北", value: 102 ,
         name: "山西", value: 81 ,
         name: "内蒙古", value: 47 ,
         name: "辽宁", value: 67 ,
         name: "吉林", value: 82 ,
         name: "黑龙江", value: 66 ,
         name: "上海", value: 24 ,
         name: "江苏", value: 92 ,
         name: "浙江", value: 114 ,
         name: "安徽", value: 109 ,
         name: "福建", value: 116 ,
         name: "江西", value: 91 ,
         name: "山东", value: 119 ,
         name: "河南", value: 137 ,
         name: "湖北", value: 116 ,
         name: "湖南", value: 114 ,
         name: "重庆", value: 91 ,
         name: "四川", value: 125 ,
         name: "贵州", value: 62 ,
         name: "云南", value: 83 ,
         name: "西藏", value: 9 ,
         name: "陕西", value: 80 ,
         name: "甘肃", value: 56 ,
         name: "青海", value: 10 ,
         name: "宁夏", value: 18 ,
         name: "新疆", value: 67 ,
         name: "广东", value: 123 ,
         name: "广西", value: 59 ,
         name: "海南", value: 14 
      ];
      var geoCoordMap = 
          上海:  [121.472644, 31.231706],
          云南:  [102.712251, 25.040609],
          内蒙古:  [111.670801, 40.818311],
          北京:  [116.405285, 39.904989],
          台湾:  [121.509062, 25.044332],
          吉林:  [125.3245, 43.886841],
          四川:  [104.065735, 30.659462],
          天津:  [117.190182, 39.125596],
          宁夏:  [106.278179, 38.46637],
          安徽:  [117.283042, 31.86119],
          山东:  [117.000923, 36.675807],
          山西:  [112.549248, 37.857014],
          广东:  [113.280637, 23.125178],
          广西:  [108.320004, 22.82402],
          新疆:  [87.617733, 43.792818],
          江苏:  [118.767413, 32.041544],
          江西:  [115.892151, 28.676493],
          河北:  [114.502461, 38.045474],
          河南:  [113.665412, 34.757975],
          浙江:  [120.153576, 30.287459],
          海南:  [110.33119, 20.031971],
          湖北:  [114.298572, 30.584355],
          湖南:  [112.982279, 28.19409],
          澳门:  [113.54909, 22.198951],
          甘肃:  [103.823557, 36.058039],
          福建:  [119.306239, 26.075302],
          西藏:  [91.132212, 29.660361],
          贵州:  [106.713478, 26.578343],
          辽宁:  [123.429096, 41.796767],
          重庆:  [106.504962, 29.533155],
          陕西:  [108.948024, 34.263161],
          青海:  [101.778916, 36.623178],
          香港:  [114.173355, 22.320048],
          黑龙江:  [126.642464, 45.756967],

      ;
      //4.把数据变成[ name: "北京", value: [121.472644, 31.231706,177] ,...]格式
      var convertData = function(data) 
        var res = [];
        for (var i = 0; i < data.length; i++) 
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) 
            res.push(
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            );
          
        
        console.log(res)
        return res;
      ;
     //5.echarts配置
      let option = 
        backgroundColor: "transparent",
        title: 
          text: "全国主要城市空气质量",
          subtext: "data from PM25.in",
          sublink: "http://www.pm25.in",
          left: "center",
          textStyle: 
            color: "#fff"
          
        ,
        tooltip: 
          trigger: "item",
          formatter: "b<br/>c "
        ,
        1)加上这个就可以实现多种颜色的功能
        visualMap: 
          min: 0,
          max: 100,
          text: ['High', 'Low'],
          calculable: true,
          seriesIndex: [0],//这个对应的是series的数组下标
          inRange: 
            color: ["#00467F", "#A5CC82"]
          
        ,
        //series就是地图上的数据（去掉就没有数据了）
        series: [
          
            type: "map",
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: 
              normal: 
                show: true
              ,
              emphasis: 
                show: false,
                textStyle: 
                  color: "#fff"
                
              
            ,
            roam: true,
            animation: false,
            data: data
          ,
        ]
      ;
      myChart.setOption(option);
      window.addEventListener("resize", function() 
        myChart.resize();
      );
    
  
;
</script>
<style lang="less">
.echartsMapAllDemo 

</style>

第二种效果：地图+光圈散点

注意：
①一定要有geo这个配置，要不然光圈出不来。
并且series中的 type: “effectScatter”,的属性中一定要加上 coordinateSystem: “geo”,
② 然后对应的series中 这几个样式一定要加，加上才有那种光圈的效果

showEffectOn: "render",
rippleEffect: 
   brushType: "stroke"
, 
hoverAnimation: true,

<template>
    <div class="echartsMapAllDemo">
        <!-- style的宽高一定要写，不写也不会展示echarts图 -->
        <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div>
    </div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default 
  data() 
    return ;
  ,
  mounted() 
    this.chinaEcharts();
  ,
  methods: 
    chinaEcharts() 
      this.$echarts.registerMap("china", chinaJson);
      let myChart = this.$echarts.init(this.$refs.myEcharts);

      var data = [
         name: "北京", value: 177 ,
         name: "天津", value: 42 ,
         name: "河北", value: 102 ,
         name: "山西", value: 81 ,
         name: "内蒙古", value: 47 ,
         name: "辽宁", value: 67 ,
         name: "吉林", value: 82 ,
         name: "黑龙江", value: 66 ,
         name: "上海", value: 24 ,
         name: "江苏", value: 92 ,
         name: "浙江", value: 114 ,
         name: "安徽", value: 109 ,
         name: "福建", value: 116 ,
         name: "江西", value: 91 ,
         name: "山东", value: 119 ,
         name: "河南", value: 137 ,
         name: "湖北", value: 116 ,
         name: "湖南", value: 114 ,
         name: "重庆", value: 91 ,
         name: "四川", value: 125 ,
         name: "贵州", value: 62 ,
         name: "云南", value: 83 ,
         name: "西藏", value: 9 ,
         name: "陕西", value: 80 ,
         name: "甘肃", value: 56 ,
         name: "青海", value: 10 ,
         name: "宁夏", value: 18 ,
        <
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi...  查看详情  
                
vue中使用echarts实现中国地图(代码片段)
第一种效果：不同省份颜色不同代码：注意：①要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来；②一定要有visualMap配置，并且它的seriesIndex属性对应的是series的数组下标；...  查看详情  
                
vue使用echarts展示地图(代码片段)
Vue使用Echarts展示地图一，获取地图json二，Vue实现展示2.1Vue环境2.2main.js引入Echarts2.3展示一，获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器二，Vue实现展示2.1Vue环境ES6、vue、vuex、vue-router、vue-cli、axi...  查看详情  
                
vue-vue使用echarts实现中国地图和点击省份进行查看(代码片段)
...到的模拟数据1，实现的效果和功能vue使用echarts实现中国地图和点击省份进行查看；下面是效果图：主要实现的功能如下：1，第一张是实现中国地图，点击任意省份能够显示tooltip提示框；2，第二张...  查看详情  
                
vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)
...实现过程：1、下载json:地址： https://hxkj.vip/demo/echartsMap/或者：EasyMap 下载的有的并非是严格的json文件，选用用  json.cn 进行转换2、vue文件中引入json࿰  查看详情  
                
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;那么先把目标定好，做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-component--templatevue-ts命令创建出项目在项目的配...  查看详情  
                
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;那么先把目标定好，做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-compone  查看详情  
                
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;那么先把目标定好，做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-compone  查看详情  
                
vue环境下用echarts绘制中国地图，并实现拖动缩放与各省份自动轮播高亮显示(代码片段)
实现效果 完整代码+详细注释：<template><divclass="echart"><divclass="content"><divid="map_cn"></div></div></div></template><script>importechartsfrom"echarts";import'echarts/map...  查看详情  
                
基于vue+ts中引用echarts的中国地图和世界地图密度表(代码片段)
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 （若转载请...  查看详情  
                
echarts实现地图(代码片段)
...为例一、先下载eacherts相关js文件（echarts.min.js）和echarts使用到的地图插件（map）ecarts.min.js在echarts官网下载，map插件下载地址：https://github.com/zhxiangfei/echarts-map （包含全国、各省城市）二、代码<scripttype="text/javascript"src="/  查看详情  
                
echarts实现中国地图数据展示(代码片段)
...echarts；一般运用到条形、折线、扇形图，今天说一说在中国地图上展示各地数据；首先要准备中国地图的JS文件，可以在网盘下载，链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码:ft9n也可以在github上克隆下来:ht  查看详情  
                
基于echarts+百度地图+three.js的数据可视化系统(代码片段)
...中引用Echarts及可能遇到的问题的文章如下所示：VUE中使用Echarts图表VUE父组件异步获取数据，子组件接收的值为空VUE渲染echarts图表宽度只显示100px问题其中提到大学的时候echarts教程较少，想要做一些理  查看详情  
                
地图（用echarts绘制）(代码片段)
...②矢量地图数据基本实现1.ECharts最基本的代码结构2.准备中国地图的矢量数据下载地址3.使用Ajax获取矢量地图数据4.在Ajax的回调函数中注册地图矢量数据，名字为chinaMap5.配置geo的type为'map'，map为'chinaMap&  查看详情  
                
vue中使用高德地图实现城市定位(代码片段)
一前端选择框点击跳转至地图选址页面<van-rowclass="address_item">　　<van-colspan="6"class="item-title">收货地址</van-col>　　<van-colspan="18">　　<pclas  查看详情  
                
vue中使用高德地图实现城市定位(代码片段)
一前端选择框点击跳转至地图选址页面<van-rowclass="address_item">　　<van-colspan="6"class="item-title">收货地址</van-col>　　<van-colspan="18">　　<pclas  查看详情  
                
echarts地图使用经验-地图变形和添加数据(代码片段)
关于echart2,echart3地图的使用一点人生经验：1.echart3，echart2加载地图变形修复。最近在使用echart2使用过程中，发现加载海南地图会产生变形。如下图，海南地图产生了较大的变形，于是需要研究怎么才能消除变形。经过一番折腾...  查看详情  
                
vue中使用百度地图实现城市定位(代码片段)
Vue项目运行环境：Vue2.0，VueCli3.0步骤一：登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二：在public文件夹的index.html文件中导入百度地图，拼上你的ak步骤...  查看详情