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 ...
随机推荐
- js构建ui的统一异常处理方案（二）
上一篇文章,我分析了同步代码做异常处理是基于责任链模式,而通过try.catch等语句可以很容易地实现这种责任链模式.但是如果是异步调用,我们无法直接通过try.catch语句实现责任链模式,并且通过 ...
- Linux中解析json---jq
遇到要在Linux上处理json的请求,换了熟悉的环境就抓瞎了,需要用心学习基础知识. jq官网:https://stedolan.github.io/jq 1.install yum ins ...
- 【中文分词】简单高效的MMSeg
最近碰到一个分词匹配需求--给定一个关键词表,作为自定义分词词典,用户query文本分词后,是否有词落入这个自定义词典中?现有的大多数Java系的分词方案基本都支持添加自定义词典,但是却不支持HDFS ...
- 表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
- Chrome 控制台实用指南
前言 个人博客:Damonare的个人主页 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大 ...
- 十大经典排序算法总结（JavaScript描述）
前言 读者自行尝试可以想看源码戳这,博主在github建了个库,读者可以Clone下来本地尝试.此博文配合源码体验更棒哦~~~ 个人博客:Damonare的个人博客 原文地址:十大经典算法总结 这世界 ...
- python处理空格脚本
博客园上传代码时拷贝vs里面的代码不能直接粘贴,否则空格会不符合要求 去掉空格代码 # -*- coding: utf-8 -*- '''打开delSpace.txt文本并删除每行开头的八个空格''' ...
- Entity Framework
Entity Framework 待整理.. 参考链接:http://www.cnblogs.com/lsxqw2004/archive/2015/08/07/4701979.html http:// ...
- 【C#进阶系列】23 程序集加载和反射
程序集加载 程序集加载,CLR使用System.Reflection.Assembly.Load静态方法,当然这个方法我们自己也可以显式调用. 还有一个Assembly.LoadFrom方法加载指定路 ...
- poj2186--tarjan+缩点
题目大意: 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...