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 ...
随机推荐
- gnuplot: 一种更为简洁的曲线，柱状图绘图软件
gnuplot: 一种更为简洁的曲线,柱状图绘图软件 gnuplot: 一种更为简洁的曲线,柱状图绘图软件 Zhong Xiewei Wed Jun 25 gnuplot简单介绍 关于gnuplot的 ...
- Azure Backup (2) Azure备份服务
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 本文介绍的Azure管理界面是Classic Model,网址:h ...
- linux源码分析（五）－start_kernel
前置:这里使用的linux版本是4.8,x86体系. local_irq_disable(); 这个函数是做了关闭中断操作.和后面的local_irq_enable相对应.说明启动的下面函数是不允许被 ...
- jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
- react初始（2）
既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力.我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接 ...
- JAVA keytool 使用详解
Keytool是一个Java数据证书的管理工具 ,Keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件中在keystore里,包含两种数据: 密钥实体 ...
- SQL SERVER2012附加 （PS：开始试过sql2012直接附加失败）
Northwind 示例数据库下载: NORTHWND.MDF (PS:开始试过sql2012直接附加失败) 新建查询-执行下面代码 USE [master] GO CREATE DATABAS ...
- JdbcTemplate进行查询
1.jdbcTemplate.queryForInt() 和 jdbcTemplate.queryForLong() 例如:下面使用queryForInt()方法传回user表中的记录数: jdbcT ...
- CSS实现弹出导航菜单
查看实际效果:http://keleyi.com/a/bjac/vksd7321.htm 完整代码,保存在html文件打开也可看到效果: <!DOCTYPE html PUBLIC " ...
- npm 入门
要使用 npm 需要安装 node.js,因为 node.js 中会附带 npm 查看 node 的安装路径 which node 查看 npm 的安装路径 which npm npm 分为两种安装模 ...