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,当前 ...
随机推荐
- Docker 制作自己的镜像
1. 下载tomcat镜像 docker pull hub.c.163.com/library/tomcat:latest 2. 创建Dockfile vi Dockerfile from hub.c ...
- C#语法中一个问号（？）和两个问号(??)的运算符
(1).C#语法中一个个问号(?)的运算符是指:可以为 null 的类型. MSDN上面的解释: 在处理数据库和其他包含不可赋值的元素的数据类型时,将 null 赋值给数值类型或布尔型以及日期类型的功 ...
- Linux系统下启动tomcat报错【java.util.prefs.BackingStoreException: Couldn't get file lock】的解决方法
Linux环境下,启动tomcat报出如题的警告信息,虽然对系统正常使用没有多大影响,但是会导致tomcat的日志垃圾信息很多,而且看起来很不爽... 具体的警告信息如下: Jan , :: PM j ...
- GTX的生成（包括COMMON）
GTX的生成(包括COMMON) 1.每一个GTX Quad需要一个GTX common,同时GTX common只包含有QPLL,不包含CPLL. 2.kintex-7设备只支持GTX 3.参考时钟 ...
- Complexity and Tractability (3.44) - The Traveling Salesman Problem
Copied From:http://csfieldguide.org.nz/en/curriculum-guides/ncea/level-3/complexity-tractability-TSP ...
- mass种子模块看完了
作者当然也不容易,要考虑各种兼容问题,要考虑效率问题(他真的考虑过吗,我表示强烈怀疑,貌似仅仅是风格上模仿其他源码) 相当无语. 本来我是知道的,代码 调试的过程中逐渐完善,逐渐与各种兼容问题和预想不 ...
- 跟未名学Office - PPT操作：高效
第二章. PPT操作:高效... 3 第一节 操作视图... 3 第二节 Word草稿... 4 第三节 幻灯片母版... 5 第四节 幻灯片页... 7 第五节 幻灯片排版... 8 第六节 模板. ...
- 用windows自带的ftp.exe实现断点续传的方法
摘自http://www.jb51.net/article/10604.htm 动画下载地址: http://www.chinesehack.org/soft/book/goonftp-jc.rar ...
- C#实现mongodb自增列的使用
创建一个集合存放_id db.createCollection("counters") 加入需要自增的字段 { "_id":"productid&qu ...
- 学习笔记之pandas
Python Data Analysis Library — pandas: Python Data Analysis Library https://pandas.pydata.org/ panda ...