Echarts 之三 —— 地市联动数据统计二
一、简介
除了是一个地图之外，我们也可以使用多地图进行地市、区县联动数据统计。需求如下：展示整改广东省的地图，并显示统计信息，当点击某一个地市的时候，就显示该地市的地图，并统计该地市区县的数据信息。
二、示例
相关echarts配置见上一篇 Echarts 之二——地市联动数据统计 。
相关代码如下：
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Echarts 地市、区县联动数据统计</title>
<meta name="decorator" content="default" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctx}/static/echart/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:600px ; width: 850px; margin: 0 auto;"></div>
<script type="text/javascript">
var cityMap = {
"广州市": "440100",
"韶关市": "440200",
"深圳市": "440300",
"珠海市": "440400",
"汕头市": "440500",
"佛山市": "440600",
"江门市": "440700",
"湛江市": "440800",
"茂名市": "440900",
"肇庆市": "441200",
"惠州市": "441300",
"梅州市": "441400",
"汕尾市": "441500",
"河源市": "441600",
"阳江市": "441700",
"清远市": "441800",
"东莞市": "441900",
"中山市": "442000",
"潮州市": "445100",
"揭阳市": "445200",
"云浮市": "445300"
}; // 路径配置
require.config({
paths: {
echarts: ${ctx}/static/echart'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: { trigger: 'item' },
series: [{
tooltip: {
trigger: 'item',
formatter: '{b} {c}'
},
name: '选择器',
type: 'map',
mapType: '广东',
mapLocation: {
x: 'left',
y: 'top',
width: '30%'
},
roam: true,
selectedMode: 'single',
itemStyle: {
emphasis: { label: { show: true } } , normal : {borderWidth : 1, borderColor : '#999999' , label : { show : true}},
},
data: [
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)}
]
}],
animation: true
}; var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {//选择地市的时候，显示地市详情
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);
return;
}
option.series[1] = {
name: '模拟数据',
type: 'map',
mapType: selectedProvince,
itemStyle: {
emphasis: { label: { show: true } }
},
mapLocation: { x: '35%' },
roam: true,
data: [
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)},
//清远
{name: "佛冈县",value: Math.round(Math.random()*1000)},
{name: "连南瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "连山壮族瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "连州市",value: Math.round(Math.random()*1000)},
{name: "清城区",value: Math.round(Math.random()*1000)},
{name: "清新县",value: Math.round(Math.random()*1000)},
{name: "阳山县",value: Math.round(Math.random()*1000)},
{name: "英德市",value: Math.round(Math.random()*1000)},
//韶关
{name: "乐昌市",value: Math.round(Math.random()*1000)},
{name: "南雄市",value: Math.round(Math.random()*1000)},
{name: "曲江区",value: Math.round(Math.random()*1000)},
{name: "仁化县",value: Math.round(Math.random()*1000)},
{name: "乳源瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "始兴县",value: Math.round(Math.random()*1000)},
{name: "翁源县",value: Math.round(Math.random()*1000)},
{name: "武江区",value: Math.round(Math.random()*1000)},
{name: "新丰县",value: Math.round(Math.random()*1000)},
{name: "浈江区",value: Math.round(Math.random()*1000)},
//湛江
{name: "赤坎区",value: Math.round(Math.random()*1000)},
{name: "雷州市",value: Math.round(Math.random()*1000)},
{name: "廉江市",value: Math.round(Math.random()*1000)},
{name: "麻章区",value: Math.round(Math.random()*1000)},
{name: "坡头区",value: Math.round(Math.random()*1000)},
{name: "遂溪县",value: Math.round(Math.random()*1000)},
{name: "吴川市",value: Math.round(Math.random()*1000)},
{name: "霞山区",value: Math.round(Math.random()*1000)},
{name: "徐闻县",value: Math.round(Math.random()*1000)},
//河源
{name: "紫金县",value: Math.round(Math.random()*1000)},
{name: "东源县",value: Math.round(Math.random()*1000)},
{name: "和平县",value: Math.round(Math.random()*1000)},
{name: "连平县",value: Math.round(Math.random()*1000)},
{name: "龙川县",value: Math.round(Math.random()*1000)},
{name: "源城区",value: Math.round(Math.random()*1000)},
//肇庆
{name: "德庆县",value: Math.round(Math.random()*1000)},
{name: "鼎湖区",value: Math.round(Math.random()*1000)},
{name: "端州区",value: Math.round(Math.random()*1000)},
{name: "封开县",value: Math.round(Math.random()*1000)},
{name: "高要市",value: Math.round(Math.random()*1000)},
{name: "广宁县",value: Math.round(Math.random()*1000)},
{name: "怀集县",value: Math.round(Math.random()*1000)},
{name: "四会市",value: Math.round(Math.random()*1000)},
//惠州
{name: "博罗县",value: Math.round(Math.random()*1000)},
{name: "博罗县",value: Math.round(Math.random()*1000)},
{name: "惠城区",value: Math.round(Math.random()*1000)},
{name: "惠东县",value: Math.round(Math.random()*1000)},
{name: "惠阳区",value: Math.round(Math.random()*1000)},
{name: "龙门县",value: Math.round(Math.random()*1000)},
//茂名市
{name: "电白县",value: Math.round(Math.random()*1000)},
{name: "高州市",value: Math.round(Math.random()*1000)},
{name: "化州市",value: Math.round(Math.random()*1000)},
{name: "茂港区",value: Math.round(Math.random()*1000)},
{name: "茂南区",value: Math.round(Math.random()*1000)},
{name: "信宜市",value: Math.round(Math.random()*1000)},
//江门
{name: "江海区",value: Math.round(Math.random()*1000)},
{name: "蓬江区",value: Math.round(Math.random()*1000)},
{name: "台山市",value: Math.round(Math.random()*1000)},
{name: "开平市",value: Math.round(Math.random()*1000)},
{name: "恩平市",value: Math.round(Math.random()*1000)},
{name: "鹤山市",value: Math.round(Math.random()*1000)},
{name: "新会区",value: Math.round(Math.random()*1000)},
//阳江市
{name: "阳春市",value: Math.round(Math.random()*1000)},
{name: "阳东县",value: Math.round(Math.random()*1000)},
{name: "江城区",value: Math.round(Math.random()*1000)},
{name: "阳西县",value: Math.round(Math.random()*1000)},
//云浮市
{name: "罗定市",value: Math.round(Math.random()*1000)},
{name: "新兴县",value: Math.round(Math.random()*1000)},
{name: "郁南县",value: Math.round(Math.random()*1000)},
{name: "云安县",value: Math.round(Math.random()*1000)},
{name: "云城区",value: Math.round(Math.random()*1000)},
//广州
{name: "海珠区",value: Math.round(Math.random()*1000)},
{name: "番禺区",value: Math.round(Math.random()*1000)},
{name: "白云区",value: Math.round(Math.random()*1000)},
{name: "从化市",value: Math.round(Math.random()*1000)},
{name: "花都区",value: Math.round(Math.random()*1000)},
{name: "黄埔区",value: Math.round(Math.random()*1000)},
{name: "荔湾区",value: Math.round(Math.random()*1000)},
{name: "萝岗区",value: Math.round(Math.random()*1000)},
{name: "南沙区",value: Math.round(Math.random()*1000)},
{name: "天河区",value: Math.round(Math.random()*1000)},
{name: "越秀区",value: Math.round(Math.random()*1000)},
{name: "增城市",value: Math.round(Math.random()*1000)},
//汕尾市
{name: "海丰县",value: Math.round(Math.random()*1000)},
{name: "陆丰市",value: Math.round(Math.random()*1000)},
{name: "陆河县",value: Math.round(Math.random()*1000)},
{name: "城区",value: Math.round(Math.random()*1000)},
//揭阳市
{name: "榕城区",value: Math.round(Math.random()*1000)},
{name: "惠来县",value: Math.round(Math.random()*1000)},
{name: "揭东县",value: Math.round(Math.random()*1000)},
{name: "揭西县",value: Math.round(Math.random()*1000)},
{name: "普宁市",value: Math.round(Math.random()*1000)},
//珠海
{name: "斗门区", value: Math.round(Math.random()*1000)},
{name: "金湾区", value: Math.round(Math.random()*1000)},
{name: "香洲区", value: Math.round(Math.random()*1000)},
//佛山市
{name: "高明区", value: Math.round(Math.random()*1000)},
{name: "南海区", value: Math.round(Math.random()*1000)},
{name: "三水区", value: Math.round(Math.random()*1000)},
{name: "顺德区", value: Math.round(Math.random()*1000)},
{name: "禅城区", value: Math.round(Math.random()*1000)},
//潮州市
{name: "潮安县",value: Math.round(Math.random()*1000)},
{name: "饶平县",value: Math.round(Math.random()*1000)},
{name: "湘桥区",value: Math.round(Math.random()*1000)},
//汕头市
{name: "南澳县",value: Math.round(Math.random()*1000)},
{name: "濠江区",value: Math.round(Math.random()*1000)},
{name: "金平区",value: Math.round(Math.random()*1000)},
{name: "龙湖区",value: Math.round(Math.random()*1000)},
{name: "澄海区",value: Math.round(Math.random()*1000)},
{name: "潮阳区",value: Math.round(Math.random()*1000)},
{name: "潮南区",value: Math.round(Math.random()*1000)},
//深圳市
{name: "南山区",value: Math.round(Math.random()*1000)},
{name: "盐田区",value: Math.round(Math.random()*1000)},
{name: "宝安区",value: Math.round(Math.random()*1000)},
{name: "福田区",value: Math.round(Math.random()*1000)},
{name: "龙岗区",value: Math.round(Math.random()*1000)},
{name: "罗湖区",value: Math.round(Math.random()*1000)}
//东莞市
//中山市
]
};
option.legend = {
x: 'right',
data: ['模拟数据']
};
option.dataRange = {
orient: 'horizontal',
x: 'right',
min: 0,
max: 1000,
color: ['orange', 'yellow'],
text: ['高', '低'], // 文本，默认为数值文本
splitNumber: 0
}; var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function(c) {
var geoJsonName = cityMap[c];
return function(callback) {//请求地市地理weizhi详情数据
$.getJSON('${ctx}/static/echart/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
} myChart.setOption(option, true);
})
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
效果图如下：
Echarts 之三 —— 地市联动数据统计二的更多相关文章
- Echarts 之二——地市联动数据统计
一.简介 通过地图可以更直观地展示各个地区的统计数据,能够更清楚地进行数据分析.有些场景下,我们不仅仅需要对每个地市进行统计分析.更需要对地市一下的区县进行数据统计,并进行联动.此事我们可以通过Ech ...
- TFS二次开发系列：七、TFS二次开发的数据统计以PBI、Bug、Sprint等为例（一）
在TFS二次开发中,我们可能会根据某一些情况对各个项目的PBI.BUG等工作项进行统计.在本文中将大略讲解如果进行这些数据统计. 一:连接TFS服务器,并且得到之后需要使用到的类方法. /// < ...
- TFS二次开发的数据统计以PBI、Bug、Sprint等为例（一）
TFS二次开发的数据统计以PBI.Bug.Sprint等为例(一) 在TFS二次开发中,我们可能会根据某一些情况对各个项目的PBI.BUG等工作项进行统计.在本文中将大略讲解如果进行这些数据统计. 一 ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- 数据统计(Ⅳ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页快捷方式>,主要介绍通过添加首页快捷方式,快速进入各个应用菜单功能. 将常用的菜单功能作为快捷方式,避免由于寻找诸多 ...
- 【转载】国内网站博客数据统计选免费Google Analytics还是百度统计
[转载]国内网站博客数据统计选免费Google Analytics还是百度统计 Google Analytics谷歌统计是我用的第一个网站统计工具,当然现在也一直在用.Google Analytics ...
- SQLServer树形数据结构的数据进行数据统计
前言 前几天朋友问我,关于SQLServer数据库中对树形结构的表数据统计问题,需求大致如下: 分类表(递归数据),A的子分类是B,B的子分类是C--分类关系不间断,A为第一层,B为第二层,C为第三层 ...
- echarts.js--前端可视化数据图形
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上, 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...
- Android之友盟多渠道打包与数据统计
文章大纲 一.多渠道打包与数据统计介绍二.友盟实现多渠道打包实战三.友盟数据统计实战四.项目源码下载五.参考文章 一.多渠道打包与数据统计介绍 多渠道打包,相信很多同学都知道.在Android ...
随机推荐
- Java类初始化
Java类初始化 成员变量的初始化和构造器 如果类的成员变量在定义时没有进行显示的初始化赋值,Java会给每个成员变量一个默认值 对于 char.short.byte.int.long.float. ...
- Microsoft Azure News(6) Azure新F系列虚拟机
<Windows Azure Platform 系列文章目录> 我们知道Azure虚拟机的CPU和内存是固定搭配的,不可以按照用户的想法随意更改. 在有些时候,我们需要虚拟机CPU核心数量 ...
- MySQL数据迁移到SQL Server
数据迁移的工具有很多,基本SSMA团队已经考虑到其他数据库到SQL Server迁移的需求了,所以已经开发了相关的迁移工具来支持. 此博客主要介绍MySQL到SQL Server数据迁移的工具:SQL ...
- block传值和代理传值的异同点
delegate:1,“一对一”,对同一个协议,一个对象只能设置一个代理delegate,所以单例对象就不能用代理:2,代理更注重过程信息的传输:比如发起一个网络请求,可能想要知道此时请求是否已经开始 ...
- 当shiro不进入自定义realm的权限认证方法时
需要加入下面的一个bean @Bean public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator(){ DefaultAdvisorA ...
- 更新整理本人所有博文中提供的代码与工具（Java，2014.01）
为了更方便地管理博文中涉及的各种代码与工具资源,现在把这些资源迁移到 Google Code 中,有兴趣者可前往下载. Java 1.<高效 Java Web 应用开发框架 JessMA v3. ...
- div+css背景渐变色代码示例
用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器. 从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm 代码: <style ty ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- 自己实现苹果安装app动画
最近在学习CALayer相关动画,然后某一天突然发现苹果安装app这动画就很不错啊,所以就想自己实现下. 具体效果如图: 还是不试不知道一试吓一跳啊,这看上去简单的动画没我想象的那么简单. 首先这个动 ...
- 【代码笔记】iOS-圆角矩形
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...