echarts.js应用之map
最近项目中用到了echarts.js中的map，我画了一个简版的案例，如下所示：
效果图：
主要代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mapChart</title>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/china.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
</head>
<body style="background-color: black;width: 1000px;height: 1000px;">
<div id="chinaMap" style="width: 1000px;height: 1000px;"> </div>
</body>
</html>
<script type="text/javascript">
chinaMapChartDraw();
// 地图数据加载
function chinaMapChartDraw() { var data = new Array();
data[0] = {
name: "上海市",
value_appAverage: 121,
value_count: 3,
value_urlAverage: 65
};
console.log(data);
var chinaMap = echarts.init(document.getElementById("chinaMap"));
var geoCoordMap = {
'香港特别行政区': [114.16, 22.27],
'澳门特别行政区': [113.54, 22.19],
'海南省': [110.34, 20.01],
'台湾省': [121.5, 25.0],
'北京市': [116.4, 40],
'上海市': [121.47, 31.2],
'天津市': [117.19, 39],
'重庆市': [106.55, 29.56],
'黑龙江省': [126.66, 45.74],
'吉林省': [125.32, 43.89],
'辽宁省': [123.429, 41.83],
'内蒙古自治区': [111.747, 40.8],
'河北省': [116.4, 39],
'新疆维吾尔自治区': [87.627, 43.79],
'甘肃省': [103.82, 36.059],
'青海省': [101.78, 36.62],
'陕西省': [108.95, 34.26],
'宁夏回族自治区': [106.258, 38.47],
'河南省': [113.75, 34.765],
'山东省': [117.02, 36.668],
'山西省': [112.56, 37.87],
'安徽省': [117.28, 31.86],
'湖南省': [112.98, 28.11],
'湖北省': [114.34, 30.54],
'江苏省': [118.76, 32.06],
'四川省': [104.076, 30.65],
'贵州省': [106.707, 26.598],
'云南省': [102.71, 25.046],
'广西壮族自治区': [108.32, 22.81],
'西藏自治区': [91.117, 29.64],
'浙江省': [120.153, 30.26],
'江西省': [115.91, 28.674],
'广东省': [113.258, 23.13],
'福建省': [119.296, 26.0998]
}; 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_count),
value_count: data[i].value_count,
value_appAverage: data[i].value_appAverage,
value_urlAverage: data[i].value_urlAverage
});
}
}
return res;
}; var mapOption = {
title: {
//text: '设备分布图',
left: 'center',
textStyle: {
color: '#fff',
size: '25px'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var res =
"<table class='tb-province'>" +
"<tr><td>城市：</td><td>" + params.name + "</td></tr>" +
"<tr><td>感知设备数量：</td><td>" + params.data.value_count + "</td></tr>" +
"<tr><td>设备安装应用均值：</td><td>" + params.data.value_appAverage + "</td></tr>" +
"<tr><td>设备访问url均值：</td><td>" + params.data.value_urlAverage + "</td></tr>" +
"</table>";
return res;
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true, // 让地图可缩小放大
itemStyle: {
normal: {
areaColor: 'rgb(0,0,0)',
borderColor: '#0F99BB',
borderWidth: 1 // 设置边框粗细
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}
]
}; chinaMap.setOption(mapOption);
$(".chinaMap").css("background", "rgb(0,0,0)");
}
</script>
echarts.js应用之map的更多相关文章
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...
- echarts3 -arcgis echarts.js修改
在echarts.js中修改修改 clone 方法 其中 source instance of Array 修改为Object.prototype.toString.call(source) ...
- Javascript 如何生成Less和Js的Source map
为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- echarts.js 做图表的插件
<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...
- echarts.js（图表插件）2.0版会导致 ZeroClipboard.js（复制插件）失效，3.0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- 关于echarts.js 柱形图
echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
随机推荐
- bootstrap-table设置表头宽度无效的解决方案
bootstrap-table设置colmuns中某列的宽度无效时,需要给整个表设置css属性: .table { table-layout: fixed; }
- 从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！
出处:http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA 强缓存与弱缓存 缓存可以简单的划分成两种类型: 强缓存( 200fromcache)与 协商缓存 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅(5)--框架总体界面介绍
在前面介绍了一些关于最新基于MVC4+EasyUI的Web开发框架文章,虽然Web开发框架的相关技术文章会随着技术的探讨一直写下去,不过这个系列的文章,到这里做一个总结,展示一下整体基于MVC4+Ea ...
- Keras/Tensorflow训练逻辑研究
Keras是什么,以及相关的基础知识,这里就不做详细介绍,请参考Keras学习站点http://keras-cn.readthedocs.io/en/latest/ Tensorflow作为backe ...
- 一次修改mysql字段类型引发的技术探究
说来,mysql数据库是我们项目中用的比较多的库,ORM工具喜欢采用细粒度的MyBatis.这里面就这么引出了两者之间的故事! 首先,说改字段吧,将一个表中的varchar字段改为enum字段.如下: ...
- SDRAM---页读写
SDRAM---页读写 1.SDRAM页访问 一页通俗的来讲就是一行. SDRAM页写操作时序图: 2.DDR(经常被提起,但是我和你不熟) DDR的连续访问操作 给DDR一个write命令,同时给出 ...
- object.key 对象的键排序 可能出现的问题
// 09-集成提测工作流var node_list_info09 = { '090101': '客户端集成自测', '090201': '编译配置', '090202': '编译出包', '0903 ...
- ALGO-11_蓝桥杯_算法训练_瓷砖铺放(递归)
问题描述 有一长度为N(<=N<=)的地板,给定两种不同瓷砖:一种长度为1,另一种长度为2,数目不限.要将这个长度为N的地板铺满,一共有多少种不同的铺法? 例如,长度为4的地面一共有如下5 ...
- PREV-4_蓝桥杯_剪格子
问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+|10* 1|52|+--****--+|20|30* 1|*******--+| 1| 2| 3|+--+--+--+ ...
- Lucene 4.3 - Facet demo
package com.fox.facet; import java.io.IOException; import java.util.ArrayList; import java.util.List ...