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,当前 ...
随机推荐
- malloc的使用、用malloc动态分配内存以适应用户的需求的源代码实例
int len; ; printf("please enter the size that you want: "); scanf("%d", &len ...
- bind智能DNS + bindUI管理系统
bind UI 管理系统 https://github.com/cucker0/BindUI # bind安装 cd /usr/local/src wget http://ftp.isc.org/is ...
- centos6 只安装mysql client（安装包安装和yum安装mysql）
方法一下载安装: 1.在/home创建mysql目录,下载如下四个软件包 http://mirrors.sohu.com/mysql/MySQL-5.7/ wget http://mirrors.so ...
- excel技巧--文本拆分合并
如果像上图那样将一单元格内拆分成同等大小的字词,可用如下步骤: 1.将该单元格的宽度缩至拆分词的大小: 2.选择同列的适当的单元格,用于填充拆分的字符: 3.点击“开始”-->填充-->两 ...
- 放一个Dynamicinputs corresponding to Dynamicknobs的Node源码
static const char* const CLASS = "AddInputsSol"; static const char* const HELP = "Add ...
- WebGL和ThreeJs学习5--ThreeJS基本功能控件
Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js http://www.hewebgl.com ...
- Random 中的种子怎么理解
种子就是生成随机数的根,就是产生随机数的基础.计算机的随机数都是伪随机数,以一个真随机数(种子)作为初始条件,然后用一定的算法不停迭代产生随机数.Java项目中通常是通过Math.random方法和R ...
- ALGO-151_蓝桥杯_算法训练_6-2递归求二进制表示位数
记: 进制转换 AC代码: #include <stdio.h> #define K 2 int main(void) { ; scanf("%d",&n); ...
- 【springboot】之常用技术文档
https://www.ibm.com/developerworks/cn/java/j-lo-spring-boot/index.html
- LeetCode——5.Longest Palindromic Substring
一.题目链接:https://leetcode.com/problems/longest-palindromic-substring/ 二.题目大意: 给定一个字符串,找出它最长的回文子串.例如,字符 ...