使用的时候出现了一个BUG, China地图的底色没有绘制出来，现在把一个小的DEMO给大家，以供参考，并附上参考文章（http://blog.csdn.net/danielinbiti/article/details/44851781），祝好。

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:500px;width:500px;"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  11.     <script type="text/javascript">
  12.         // 路径配置
  13.         require.config({
  14.             paths: {
  15.                 echarts: 'http://echarts.baidu.com/build/dist'
  16.             }
  17.         });
  18.  
  19.         // 使用
  20.         require(
  21.             [
  22.                 'echarts',
  23.                 'echarts/chart/map'  // 使用柱状图就加载bar模块，按需加载
  24.             ],
  25.             function (ec) {
  26.                 // 基于准备好的dom，初始化echarts图表
  27.                 var myChart = ec.init(document.getElementById('main')); 
  28.  
  29.                       var effect = {
  30.     show: true,
  31.     scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2,
  32.     period: 30,             // 运动周期，无单位，值越大越慢
  33.     color: '#fff',
  34.     shadowColor: 'rgba(220,220,220,0.4)',
  35.     shadowBlur : 5
  36. };
  37. function itemStyle(idx) {
  38.     return {
  39.         normal: {
  40.             color:'#fff',
  41.             borderWidth:1,
  42.             borderColor:['rgba(30,144,255,1)','lime'][idx],
  43.             lineStyle: {
  44.                 //shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
  45.                 //shadowBlur: 10,
  46.                 //shadowOffsetX: 0,
  47.                 //shadowOffsetY: 0,
  48.                 type: 'solid'
  49.             }
  50.         }
  51.     }
  52. };
  53. var option = {
  54.     backgroundColor: '#1b1b1b',
  55.     color: ['rgba(30,144,255,1)','lime'],
  56.     title : {
  57.         text: '中国铁路运输主干线',
  58.         subtext:'数据来自维基百科',
  59.         x:'center',
  60.         textStyle : {
  61.             color: '#fff'
  62.         }
  63.     },
  64.       tooltip : {
  65.         trigger: 'item',
  66.         formatter: '{b}'
  67.     },
  68.     toolbox: {
  69.         show : true,
  70.         orient : 'vertical',
  71.         x: 'right',
  72.         y: 'center',
  73.         feature : {
  74.             mark : {show: true},
  75.             dataView : {show: true, readOnly: false},
  76.             restore : {show: true},
  77.             saveAsImage : {show: true}
  78.         }
  79.     },
  80.     series : [
  81.              {
  82.             name: '八横通道',
  83.             type: 'map',
  84.             roam: true,
  85.             hoverable: false,
  86.             mapType: 'china',
  87.             itemStyle:{
  88.                 normal:{
  89.                     borderColor:'rgba(100,149,237,1)',
  90.                     borderWidth:0.5,
  91.                     areaStyle:{
  92.                         color: '#1b1b1b'
  93.                     }
  94.                 }
  95.             },
  96.             data:[],
  97.  
  98.         },
  99.         {
  100.             name: '八横通道',
  101.             type: 'map',
  102.             roam: true,
  103.             hoverable: false,
  104.             mapType: 'china',
  105.             itedmStyle:{
  106.                 normal:{
  107.                     borderColor:'rgba(100,149,237,1)',
  108.                     borderWidth:0.5,
  109.                     areaStyle:{
  110.                         //color: '#1b1b1b'
  111.                         color: 'red'
  112.                     }
  113.                 }
  114.             },
  115.             data:[],
  116.             markLine : {
  117.                 symbol: ['circle', 'circle'],
  118.                 symbolSize : 1,
  119.                 effect : effect,
  120.                 itemStyle : itemStyle(1),
  121.                 smooth:true,
  122.                 data : [
  123.                     [{name:'北京'}, {name:'兰州'}],
  124.                     [{name:'兰州'}, {name:'拉萨'}],
  125.  
  126.                     [{name:'大同'}, {name:'秦皇岛'}],
  127.  
  128.                     [{name:'神木'}, {name:'黄骅'}],
  129.  
  130.                     [{name:'太原'}, {name:'德州'}],
  131.                     [{name:'德州'}, {name:'龙口'}],
  132.                     [{name:'龙口'}, {name:'烟台'}],
  133.  
  134.                     [{name:'太原'}, {name:'德州'}],
  135.                     [{name:'德州'}, {name:'济南'}],
  136.                     [{name:'济南'}, {name:'青岛'}],
  137.  
  138.                     [{name:'长治'}, {name:'邯郸'}],
  139.                     [{name:'邯郸'}, {name:'济南'}],
  140.                     [{name:'济南'}, {name:'青岛'}],
  141.  
  142.                     [{name:'瓦塘'}, {name:'临汾'}],
  143.                     [{name:'临汾'}, {name:'长治'}],
  144.                     [{name:'长治'}, {name:'汤阴'}],
  145.                     [{name:'汤阴'}, {name:'台前'}],
  146.                     [{name:'台前'}, {name:'兖州'}],
  147.                     [{name:'兖州'}, {name:'日照'}],
  148.  
  149.                     [{name:'侯马'}, {name:'月山'}],
  150.                     [{name:'月山'}, {name:'新乡'}],
  151.                     [{name:'新乡'}, {name:'兖州'}],
  152.                     [{name:'兖州'}, {name:'日照'}],
  153.  
  154.                     [{name:'连云港'}, {name:'郑州'}],
  155.                     [{name:'郑州'}, {name:'兰州'}],
  156.                     [{name:'兰州'}, {name:'乌鲁木齐'}],
  157.                     [{name:'乌鲁木齐'}, {name:'阿拉山口'}],
  158.  
  159.                     [{name:'西安'}, {name:'南阳'}],
  160.                     [{name:'南阳'}, {name:'信阳'}],
  161.                     [{name:'信阳'}, {name:'合肥'}],
  162.                     [{name:'合肥'}, {name:'南京'}],
  163.                     [{name:'南京'}, {name:'启东'}],
  164.  
  165.                     [{name:'重庆'}, {name:'武汉'}],
  166.                     [{name:'武汉'}, {name:'九江'}],
  167.                     [{name:'九江'}, {name:'铜陵'}],
  168.                     [{name:'铜陵'}, {name:'南京'}],
  169.                     [{name:'南京'}, {name:'上海'}],
  170.  
  171.                     [{name:'上海'}, {name:'怀化'}],
  172.                     [{name:'怀化'}, {name:'重庆'}],
  173.                     [{name:'重庆'}, {name:'成都'}],
  174.                     [{name:'成都'}, {name:'贵阳'}],
  175.                     [{name:'贵阳'}, {name:'昆明'}],
  176.  
  177.                     [{name:'昆明'}, {name:'南宁'}],
  178.                     [{name:'南宁'}, {name:'黎塘'}],
  179.                     [{name:'黎塘'}, {name:'湛江'}]
  180.                 ]
  181.             },
  182.             geoCoord: {
  183.                 '阿拉山口':[82.5757,45.1706],
  184.                 '包头':[109.8403,40.6574],
  185.                 '北京':[116.4075,39.9040],
  186.                 '成都':[104.0665,30.5723],
  187.                 '大连':[121.6147,38.9140],
  188.                 '大同':[113.3001,40.0768],
  189.                 '德州':[116.3575,37.4341],
  190.                 '福州':[119.2965,26.0745],
  191.                 '广州':[113.2644,23.1292],
  192.                 '贵阳':[106.6302,26.6477],
  193.                 '哈尔滨':[126.5363,45.8023],
  194.                 '邯郸':[114.5391,36.6256],
  195.                 '杭州':[120.1551,30.2741],
  196.                 '合肥':[117.2272,31.8206],
  197.                 '侯马':[111.3720,35.6191],
  198.                 '怀化':[109.9985,27.5550],
  199.                 '淮安':[119.0153,33.6104],
  200.                 '黄骅':[117.3300,38.3714],
  201.                 '济南':[117.1205,36.6510],
  202.                 '焦作':[113.2418,35.2159],
  203.                 '九江':[116.0019,29.7051],
  204.                 '九龙红磡':[114.1870,22.3076],
  205.                 '昆明':[102.8329,24.8801],
  206.                 '拉萨':[91.1409,29.6456],
  207.                 '兰州':[103.8343,36.0611],
  208.                 '黎塘':[109.1363,23.2066],
  209.                 '连云港':[119.2216,34.5967],
  210.                 '临汾':[111.5190,36.0880],
  211.                 '柳州':[109.4160,24.3255],
  212.                 '龙口':[120.4778,37.6461],
  213.                 '洛阳':[112.4540,34.6197],
  214.                 '满洲里':[117.3787,49.5978],
  215.                 '南昌':[115.8581,28.6832],
  216.                 '南京':[118.7969,32.0603],
  217.                 '南宁':[108.3661,22.8172],
  218.                 '南阳':[112.5283,32.9908],
  219.                 '宁波':[121.5440,29.8683],
  220.                 '启东':[121.6574,31.8082],
  221.                 '秦皇岛':[119.6005,39.9354],
  222.                 '青岛':[120.3826,36.0671],
  223.                 '日照':[119.5269,35.4164],
  224.                 '厦门':[118.0894,24.4798],
  225.                 '上海':[121.4737,31.2304],
  226.                 '深圳':[114.0579,22.5431],
  227.                 '神木':[110.4871,38.8610],
  228.                 '沈阳':[123.4315,41.8057],
  229.                 '台前':[115.8717,35.9701],
  230.                 '太原':[112.5489,37.8706],
  231.                 '汤阴':[114.3572,35.9218],
  232.                 '天津':[117.2010,39.0842],
  233.                 '铜陵':[117.8121,30.9454],
  234.                 '瓦塘':[109.7600,23.3161],
  235.                 '温州':[120.6994,27.9943],
  236.                 '乌鲁木齐':[87.6168,43.8256],
  237.                 '武汉':[114.3054,30.5931],
  238.                 '西安':[108.9402,34.3416],
  239.                 '新乡':[113.9268,35.3030],
  240.                 '信阳':[114.0913,32.1470],
  241.                 '烟台':[121.4479,37.4638],
  242.                 '兖州':[116.7838,35.5531],
  243.                 '月山':[113.0550,35.2104],
  244.                 '湛江':[110.3594,21.2707],
  245.                 '长治':[113.1163,36.1954],
  246.                 '郑州':[113.6254,34.7466],
  247.                 '重庆':[106.5516,29.5630]
  248.             }
  249.         }
  250.     ]
  251. };
  252.  
  253.                 // 为echarts对象加载数据
  254.                 myChart.setOption(option);
  255.             }
  256.         );
  257.     </script>
  258. </body>

注意： Series里面，一共写了两个data，这样才会显示China地图的底图，否则BUG出现了之后地图的底色是高亮的。

Echarts Map地图类型使用的更多相关文章

  1. echarts map 地图在react项目中的使用

    需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...

  2. echarts Map(地图) 不同颜色区块显示

    以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...

  3. Echarts Map地图下钻至县级

    **准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...

  4. echarts map地图设置外边框或者阴影

    geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...

  5. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  6. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  7. ECharts Map 属性详解

    $(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...

  8. ECharts 实现地图散点图上（转载）

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上)  小红  2016-04-28  ECharts, 教 ...

  9. echarts以地图形式显示中国疫情情况实现点击省份下钻

    首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...

随机推荐

  1. 新手SSH基础框架搭建

    SSH 为 struts+spring+hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架. 首先我们先了解SSH的框架所需的包和基本概念: 一.下面我们先来了解一下strut ...

  2. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  3. Javaweb——过滤器映射

    什么是过滤器? 过滤器:从字面上看,可以理解为将具有杂质的水过滤,留下干净的水.那么从IT的角度上理解.过滤器:是处在源数据(数据库之类的)和目标数据(显示页面)的中间组件.对于Web应用来说,过滤器 ...

  4. jquery.datatable.js与CI整合 异步加载（大数据量处理）

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  5. iOS之微信支付

    前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要 ...

  6. android 双缓存机制

    废话不多说,直接贴代码! 所谓的双缓存,第一就是缓存在内存里面,第二就是缓存在SD卡里面,当你需要加载数据时,先去内存缓存中查找,如果没有再去SD卡中查找,并且用户可以自选使用哪种缓存! 缓存内存和缓 ...

  7. Android打造属于自己的数据库操作类。

    1.概述 开发Android的同学都知道sdk已经为我们提供了一个SQLiteOpenHelper类来创建和管理SQLite数据库,通过写一个子类去继承它,就可以方便的创建.管理数据库.但是当我们需要 ...

  8. python之(re)正则表达式上

    python正则表达式知识预备 正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python的语法冲突,因此,Python用" \\\\ "表 ...

  9. SQL Server 2008 安装过程中遇到“性能计数器注册表配置单元一致性”检查失败 问题的解决方法

    操作步骤: 1. 在 Microsoft Windows 2003 或 Windows XP 桌面上,依次单击"开始"."运行",然后在"打开&quo ...

  10. composer "Illegal offset type in isset or empty"报错解决方案

    最近更新了composer版本,即执行以下任一命令 composer selfupdate | composer self-update 再次执行 composer update -vvv 会出现“I ...