最近项目中用到了echarts.js中的map，我画了一个简版的案例，如下所示：

效果图：

主要代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>mapChart</title>
  6.   <script src="../static/js/echarts.min.js"></script>
  7.   <script src="../static/js/china.js"></script>
  8.   <script src="../static/js/jquery-3.2.1.min.js"></script>
  9. </head>
  10. <body style="background-color: black;width: 1000px;height: 1000px;">
  11. <div id="chinaMap" style="width: 1000px;height: 1000px;">
  12.  
  13. </div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17.     chinaMapChartDraw();
  18.     // 地图数据加载
  19.     function chinaMapChartDraw() {
  20.  
  21.         var data = new Array();
  22.         data[0] = {
  23.             name: "上海市",
  24.             value_appAverage: 121,
  25.             value_count: 3,
  26.             value_urlAverage: 65
  27.         };
  28.         console.log(data);
  29.         var chinaMap = echarts.init(document.getElementById("chinaMap"));
  30.         var geoCoordMap = {
  31.             '香港特别行政区': [114.16, 22.27],
  32.             '澳门特别行政区': [113.54, 22.19],
  33.             '海南省': [110.34, 20.01],
  34.             '台湾省': [121.5, 25.0],
  35.             '北京市': [116.4, 40],
  36.             '上海市': [121.47, 31.2],
  37.             '天津市': [117.19, 39],
  38.             '重庆市': [106.55, 29.56],
  39.             '黑龙江省': [126.66, 45.74],
  40.             '吉林省': [125.32, 43.89],
  41.             '辽宁省': [123.429, 41.83],
  42.             '内蒙古自治区': [111.747, 40.8],
  43.             '河北省': [116.4, 39],
  44.             '新疆维吾尔自治区': [87.627, 43.79],
  45.             '甘肃省': [103.82, 36.059],
  46.             '青海省': [101.78, 36.62],
  47.             '陕西省': [108.95, 34.26],
  48.             '宁夏回族自治区': [106.258, 38.47],
  49.             '河南省': [113.75, 34.765],
  50.             '山东省': [117.02, 36.668],
  51.             '山西省': [112.56, 37.87],
  52.             '安徽省': [117.28, 31.86],
  53.             '湖南省': [112.98, 28.11],
  54.             '湖北省': [114.34, 30.54],
  55.             '江苏省': [118.76, 32.06],
  56.             '四川省': [104.076, 30.65],
  57.             '贵州省': [106.707, 26.598],
  58.             '云南省': [102.71, 25.046],
  59.             '广西壮族自治区': [108.32, 22.81],
  60.             '西藏自治区': [91.117, 29.64],
  61.             '浙江省': [120.153, 30.26],
  62.             '江西省': [115.91, 28.674],
  63.             '广东省': [113.258, 23.13],
  64.             '福建省': [119.296, 26.0998]
  65.         };
  66.  
  67.         var convertData = function (data) {
  68.             var res = [];
  69.             for (var i = 0; i < data.length; i++) {
  70.                 var geoCoord = geoCoordMap[data[i].name];
  71.                 if (geoCoord) {
  72.                     res.push({
  73.                         name: data[i].name,
  74.                         value: geoCoord.concat(data[i].value_count),
  75.                         value_count: data[i].value_count,
  76.                         value_appAverage: data[i].value_appAverage,
  77.                         value_urlAverage: data[i].value_urlAverage
  78.                     });
  79.                 }
  80.             }
  81.             return res;
  82.         };
  83.  
  84.         var mapOption = {
  85.             title: {
  86.                 //text: '设备分布图',
  87.                 left: 'center',
  88.                 textStyle: {
  89.                     color: '#fff',
  90.                     size: '25px'
  91.                 }
  92.             },
  93.             tooltip: {
  94.                 trigger: 'item',
  95.                 formatter: function (params) {
  96.                     var res =
  97.                         "<table class='tb-province'>" +
  98.                         "<tr><td>城市：</td><td>" + params.name + "</td></tr>" +
  99.                         "<tr><td>感知设备数量：</td><td>" + params.data.value_count + "</td></tr>" +
  100.                         "<tr><td>设备安装应用均值：</td><td>" + params.data.value_appAverage + "</td></tr>" +
  101.                         "<tr><td>设备访问url均值：</td><td>" + params.data.value_urlAverage + "</td></tr>" +
  102.                         "</table>";
  103.                     return res;
  104.                 }
  105.             },
  106.             geo: {
  107.                 map: 'china',
  108.                 label: {
  109.                     emphasis: {
  110.                         show: false
  111.                     }
  112.                 },
  113.                 roam: true, // 让地图可缩小放大
  114.                 itemStyle: {
  115.                     normal: {
  116.                         areaColor: 'rgb(0,0,0)',
  117.                         borderColor: '#0F99BB',
    　　　　　　　　　　　　　　borderWidth: 1 // 设置边框粗细
  118.                     },
  119.                     emphasis: {
  120.                         areaColor: '#2a333d'
  121.                     }
  122.                 }
  123.             },
  124.             series: [
  125.                 {
  126.                     name: 'pm2.5',
  127.                     type: 'scatter',
  128.                     coordinateSystem: 'geo',
  129.                     data: convertData(data),
  130.                     symbolSize: function (val) {
  131.                         return 10;
  132.                     },
  133.                     label: {
  134.                         normal: {
  135.                             formatter: '{b}',
  136.                             position: 'right',
  137.                             show: false
  138.                         },
  139.                         emphasis: {
  140.                             show: true
  141.                         }
  142.                     },
  143.                     itemStyle: {
  144.                         normal: {
  145.                             color: '#ddb926'
  146.                         }
  147.                     }
  148.                 }
  149.             ]
  150.         };
  151.  
  152.         chinaMap.setOption(mapOption);
  153.         $(".chinaMap").css("background", "rgb(0,0,0)");
  154.     }
  155. </script>

echarts.js应用之map的更多相关文章

  1. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

  2. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...

  3. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

  4. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  5. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  6. echarts.js（图表插件）2.0版会导致 ZeroClipboard.js（复制插件）失效，3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  7. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  8. 关于echarts.js 柱形图

    echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...

  9. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

随机推荐

  1. 配置B类内网 和 配置A类内网

    首先 A 类网 对应的 子网掩码是255.0.0.0 B 类网 对应的 子网掩码是255.255.0.0 C 类网 对应的 子网掩码是255.255.255.0 一般来说 10 开头的都是 A 类网  ...

  2. Jmeter实现接口自动化测试

    一.环境准备 1.Jdk1.7或以上: 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...

  3. cvs报错： socket exception recv failed

    连接都OK的. 也可以telnet到服务器上去. 网上的各种方法都试了,没法解决. 后来一直在乱试,居然解决了. 就是这样设置的,选中第一个复选框.

  4. java中length与length()

    length是对数组而言的,指的是数组的长度. length()是对字符串而言的,指的是字符串所包含的字符个数. public class LengthDemo { public static voi ...

  5. 查看JVM运行时参数

    1.查看JVM运行时参数 -XX:+PrintFlagsInitial -XX:PrintFlagsFinal -XX:+UnlockExperimentalVMOptions 解锁实验参数 -XX: ...

  6. Typescript学习总结1

    Typescript字符串处理 首先打开运行Typescript的编辑器 http://www.typescriptlang.org/play/index.html 1. 调用变量和方法 var my ...

  7. Go RPC返回值

    Go 语言RPC定义格式如下: func (t T) MethodName(argType T1, replyType T2) error 第一个参数是接收的参数,第二个参数是返回给客户端的参数,第二 ...

  8. sqlalchemy操作----外键关联，relationship

    ... #!_*_coding:utf-8_*_ #__author__:"Alex huang" import sqlalchemy from sqlalchemy import ...

  9. WebApi安全性 使用TOKEN+签名验证 (秘钥是GUID的,私有的，不是雙方的，并不在网络连接上传输)

    转http://www.cnblogs.com/MR-YY/archive/2016/10/18/5972380.html WebApi安全性 使用TOKEN+签名验证   首先问大家一个问题,你在写 ...

  10. IDEA创建Springmvc项目

    项目主要步骤如下: 1.创建一个javaweb动态项目 2.导入springmvc demo所需要的jar包 3.生成项目war包 4.配置项目tomacat服务器 5.配置web.xml文件 6.编 ...