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,当前 ...
随机推荐
- 反转链表 II
反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m = 2, ...
- 不同路径 II
一个机器人位于一个 m x n 网格的左上角 (起始点标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角. 现在考虑网格中有障碍物.那么从左上角到右下角将会有多 ...
- Eclipse配置问题
1.eclipse中通过search打开第二个文件时第一个文件自动关闭问题: 解决方案: window-preferences-general-search找到第一行的一个选项 reuse edit ...
- java-保留x个小数位
public BigDecimal setScale(int newScale,RoundingMode roundingMode)返回 BigDecimal,其标度为指定值,其非标度值通过此 Big ...
- HTMLParser 笔记
# 关于html.parse.HTMLParser的使用 from html.parser import HTMLParser class MyHtmlParser(HTMLParser): # 使用 ...
- Visual Studio中设置Nuget程序包源
用vs2015,默认的程序包源是Microsoft and .NET,很多常见的开源包在里面搜索不到. 这时候就需要配置一个更开放的包源,网上搜了一下,都没人提供这个问题,所以自己动脑花了一番脑经,看 ...
- Apache Tika
Tika入门 Tika是一个内容抽取的工具集合(a toolkit for text extracting).它集成了POI, Pdfbox 并且为文本抽取工作提供了一个统一的界面.其次,Tika也提 ...
- 微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
- modbus tcp 入门详解
Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试 前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com ...
- google使用的开源的工具类Thumbnailator图像处理
maven依赖 <dependency> <groupId>net.coobird</groupId> <artifactId>thum ...