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,当前 ...
随机推荐
- enum和数据库entity互转
注意,code和desc都是string的,数据库的entity是integer,dto的是enum,所以需要一个转换 entity转dto EnumGender.getEnum(String.val ...
- Tornado cookie 笔记
set_cookie()/get_cookie()的使用 def get(self): # self.get_cookie()获取cookie if not self.get_cookie('name ...
- Application Request Route实现IIS Server Farms集群负载
首先你装一个web 平台安装程序:https://www.microsoft.com/zh-CN/download/details.aspx?id=6164 安装完之后会出现打开界面,iis中也可找到 ...
- msp430及stm32中基本的C编程知识
为什么我使用P1OUT ^= 0x01;和P1OUT = 0x01 ^是异或计算符号 所以 每次运算都是反转的.而不不加这个运算符就是一直保持1的状态. p1out|=bit6的意思p1out的值如果 ...
- IntelliJ IDEA maven项目 ***
创建一个新Maven项目 new 一个project 不选择任何Maven模板 起个GroupId.ArifactId 起个项目名.注意:Idea_Project是存放此项目的工作区间,mavenDe ...
- debian下erlang新版本安装
debian下的erlang版本太老 安装kerl,并且在profile内添加到PATH curl -o ~/dev/erlang/kerl https://raw.githubusercontent ...
- CentOS 7.4 初次手记：第四章 CentOS安全了解
第四章 CentOS安全了解... 66 第一节 user.group.chmod. 66 I 10位文件属性... 66 II user/group增删改... 67 III user/group配 ...
- 无需AutoCAD，用C#生成DWG文件
是一个类库:Teigha.NET for .DWG 利用它就可以在无需安装AutoCAD软件的情况下,生成.读取DWG文件,适合那些导入导出的场合. Teigha曾用名OpenDWG .DWGdire ...
- JS属性描述符之Object.defineProperty()定义对象属性特性
一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...
- Global配置接口访问日志以及测试日志记录
在客户端请求接口时,经常会出现接口相应慢,接口等待超时,接口错误,为了这事相信不少后台开发者为此背锅,记下请求日志,拿出有力证据这才是关键. 1.接口请求错误记录 很多时候接口请求出现的500,404 ...