echart四川地图
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="block" uri="/taglib/block"%>
<block:extends name="title">客运站地区分布</block:extends>
<block:extends name="front_js">
<script type="text/javascript"
src="${staticDomain}/js/plugins/My97DatePicker/WdatePicker.js"></script>
</block:extends>
<block:extends name="js">
<script type='text/javascript'
src="${staticDomain}/js/plugins/uniform/jquery.uniform.min.js"></script> <script type='text/javascript'
src='${staticDomain}/js/plugins/datatables/jquery.dataTables.min.js'></script>
<script type='text/javascript'
src="${staticDomain}/js/plugins/select/select2.min.js"></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/shbrush/XRegExp.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/shbrush/shCore.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/shbrush/shBrushXml.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/shbrush/shBrushJScript.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/shbrush/shBrushCss.js'></script>
<script type='text/javascript' src='${staticDomain}/js/common/page.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/plugins/echart/echarts-all.js'></script>
<script type='text/javascript'
src='${staticDomain}/js/common/commonchart.js'></script> </block:extends> <block:extends name="h1">客运站地区分布</block:extends>
<block:extends name="sub_h1">客运站地区分布</block:extends> <block:extends name="content">
<div class="content"> <div class="page-header">
<div class="icon">
<span class="ico-layout-7"></span>
</div> <!-- -------------------------------h1,sub_h1标签------------------------------------- -->
<h1>
<block:base name="h1">列表</block:base>
<small><block:base name="sub_h1">副标题</block:base></small>
</h1>
</div> <div class="row-fluid">
<div class="span12">
<div class="block">
<div id="main" style="height: 80%"></div>
<div id="" style="height: 5%"></div>
</div>
</div>
</div>
</div> <input type="hidden" id="refresh" value="0" />
</block:extends> <block:extends name="script">
<script>
//定时刷新
var second=60000; //间隔时间60秒钟
setInterval("mapDisplay();",second); mapDisplay();
function mapDisplay() {
/*所有车站接口 */
var option = {
title : {
text : '客运站地区分布',
x : 'center',
//padding:[15,0,0,10],
textStyle : {
fontSize : 16,
color : '#009AD7'
}
},
//弹框显示
tooltip : {
trigger : 'item',
formatter : function(a) {
return a.name + ": " + a.value;
}
},
legend : {
orient : 'vertical', // 'vertical'
x : 'left', // 'center' | 'left' | {number},
y : 'top', // 'center' | 'bottom' | {number}
borderWidth : 0,
padding : 10, // [5, 10, 15, 20]
itemGap : 20,
textStyle : {
color : 'red'
},
selectedMode : 'single',
selected : {
'所有客运站' : true,
'一级客运站' : false,
'二级客运站' : false,
'三级客运站' : false,
'其他客运站' : false
},
data : [ {
name : '所有客运站',
textStyle : {
fontWeight : 'bold',
color : 'green'
}
}, '一级客运站', '二级客运站', '三级客运站', '其他客运站' ]
},
dataRange : {
x : 'left',
y : 'bottom',
splitList : [ {
start : 61
}, {
start : 41,
end : 60
}, {
start : 21,
end : 41
}, {
start : 16,
end : 20
}, {
start : 11,
end : 15
},//, label: ''
{
start : 6,
end : 10
},//, label: '', color: 'black'
{
start : 0,
end : 5
} ],
color : [ '#E0022B', '#E09107', '#A3E00B' ]
},
roamController : {
show : true,
x : 'right',
mapTypeControl : {
'四川' : true
}
},
series : [ {
name : '所有客运站',
type : 'map',
mapType : '四川',
roam : true,
itemStyle : {
normal : {
label : {
show : true,
formatter: function(params) {
for(var i = 0; i < option.series[0].data.length; i++)
{
if (option.series[0].data[i].name == params) {
return params +"("+ option.series[0].data[i].value+")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : []
}, {
name : '一级客运站',
type : 'map',
mapType : '四川',
roam : true,
itemStyle : {
normal : {
label : {
show : true,
formatter: function(params) {
for(var i = 0; i < option.series[0].data.length; i++)
{
if (option.series[1].data[i].name == params) {
return params +"("+ option.series[1].data[i].value+")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
}, data : []
}, {
name : '二级客运站',
type : 'map',
mapType : '四川',
roam : true,
itemStyle : {
normal : {
label : {
show : true,
formatter: function(params) {
for(var i = 0; i < option.series[0].data.length; i++)
{
if (option.series[2].data[i].name == params) {
return params +"("+ option.series[2].data[i].value+")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
}, data : []
}, {
name : '三级客运站',
type : 'map',
mapType : '四川',
roam : true,
itemStyle : {
normal : {
label : {
show : true,
formatter: function(params) {
for(var i = 0; i < option.series[0].data.length; i++)
{
if (option.series[3].data[i].name == params) {
return params +"("+ option.series[3].data[i].value+")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
}, data : []
},
{
name : '其他客运站',
type : 'map',
mapType : '四川',
roam : true,
itemStyle : {
normal : {
label : {
show : true,
formatter: function(params) {
for(var i = 0; i < option.series[0].data.length; i++)
{
if (option.series[4].data[i].name == params) {
return params +"("+ option.series[4].data[i].value+")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : []
} ]
}; var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option); //所有数据
$.get('${baseDomain}/region/getAllStationDis.json', function(json) {
if (json.success) {
var res1 = json.data;
var res=res1[0];//所有客运站
var result = res1[1];//一级客运站
var result2 = res1[2];//二级客运站
var result3 = res1[3];//三级客运站
var result4 = res1[4];//其他客运站
var a=0;
for (var i = 0; i < res.length; i++) {
a=Number(a) + Number(res[i].value);
}
//legend点击选中事件
myChart.on(echarts.config.EVENT.LEGEND_SELECTED, function (param){
var leg=param.target;
if(leg=='所有客运站'){
var a=0;
for (var i = 0; i < res.length; i++) {
a=Number(a) + Number(res[i].value);
}
option.title.text='客运站地区分布(客运站数量'+a+')';
}else if(leg=='一级客运站')
{
var a=0;
for (var i = 0; i < result.length; i++) {
a=Number(a) + Number(result[i].value);
}
option.title.text='客运站地区分布(客运站数量'+a+')';
}else if(leg=='二级客运站')
{
var a=0;
for (var i = 0; i < result2.length; i++) {
a=Number(a) + Number(result2[i].value);
}
option.title.text='客运站地区分布(客运站数量'+a+')';
}else if(leg=='三级客运站')
{
var a=0;
for (var i = 0; i < result3.length; i++) {
a=Number(a) + Number(result3[i].value);
}
option.title.text='客运站地区分布(客运站数量'+a+')';
}else{
var a=0;
for (var i = 0; i < result4.length; i++) {
a=Number(a) + Number(result4[i].value);
}
option.title.text='客运站地区分布(客运站数量'+a+')';
}
myChart.hideLoading();
myChart.setOption(option);
//点击按钮的赋值
myChart.setOption({
title : {
text : '客运站地区分布(客运站数量'+a+')',
x : 'center',
textStyle : {
fontSize : 16,
color : '#009AD7'
}
},
series : [{
title:
{
text : '客运站地区分布(客运站数量'+a+')',
x : 'center',
textStyle : {
fontSize : 16,
color : '#009AD7'
}
},
//根据名字找到对应系列
name : '所有客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(params) {
for (var i = 0; i < res.length; i++) {
if (res[i].name == params) {
return params
+ "("
+ res[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data:res
},
{
name : '一级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result.length; i++) {
if (params==result[i].name) {
return params
+ "("
+ result[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result
},
{
name : '二级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result2.length; i++) {
if (params==result2[i].name) {
return params
+ "("
+ result2[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result2
},
{
name : '三级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result3.length; i++) {
if (params==result3[i].name) {
return params
+ "("
+ result3[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result3
},
{
name : '其他客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result4.length; i++) {
if (params==result4[i].name) {
return params
+ "("
+ result4[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result4
}
]
});
});
//首次赋值
myChart.setOption({
title : {
text : '客运站地区分布(客运站数量'+a+')',
x : 'center',
textStyle : {
fontSize : 16,
color : '#009AD7'
}
},
series : [{
title:
{
text : '客运站地区分布(客运站数量'+a+')',
x : 'center',
textStyle : {
fontSize : 16,
color : '#009AD7'
}
},
//根据名字找到对应系列
name : '所有客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(params) {
for (var i = 0; i < res.length; i++) {
if (res[i].name == params) {
return params
+ "("
+ res[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data:res
},
{
name : '一级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result.length; i++) {
if (params==result[i].name) {
return params
+ "("
+ result[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result
},
{
name : '二级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result2.length; i++) {
if (params==result2[i].name) {
return params
+ "("
+ result2[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result2
},
{
name : '三级客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result3.length; i++) {
if (params==result3[i].name) {
return params
+ "("
+ result3[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result3
},
{
name : '其他客运站',
itemStyle : {
normal : {
label : {
show : true,
formatter : function(
params) {
for (var i = 0; i < result4.length; i++) {
if (params==result4[i].name) {
return params
+ "("
+ result4[i].value
+ ")";
}
}
},
textStyle : {
color : "rgb(249, 249, 249)"
}
}
},
emphasis : {
label : {
show : false
}
}
},
data : result4
}
]
}); } else {
showErrorMsg(json.msg);
}
}, 'json'); }
</script>
</block:extends> <jsp:include page="/common/base.jsp"></jsp:include>
学习教程地址：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts或者http://echarts.baidu.com/echarts2/doc/doc.html
效果展示：
echart四川地图的更多相关文章
- ehcarts 四川地图
vue 首先你要傻子地图就引入进来(没得的地图需要你json请求得到(这个json自己去找),然后你要注册这个地图,echarts有的话就不用注册) import "../../node_m ...
- echart 扩展地图不显示问题
今天写项目需要一个安徽地图,但echart自带的安徽地图还是老版的,仍有巢湖市,但客户要求不能有,只好重新找, 后发现ECharts 地图数据在线生成工具 :http://ecomfe.github. ...
- echart 百度地图实现效果
1 必须引入 echarts.js文件 以及 china.js 点文件才可以执行代码2 ehcart官方文档有点小恶心,看了半天,好多东西都不是很清楚,必须挨个实验才行,希望对一些初学者来说可以少走一 ...
- vue使用echart中国地图
/* 引入 ECharts (按需加载) 文档:http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD ...
- echart3 湖北地图及如何创建其他省份地图
刚刚收到一封园友求助echart湖北地图的邮件,现在将湖北地图的所有代码贴到这里,希望可以帮助到更多朋友. 1.首先你得到echarts官网下载js,很多人说找不到,可以到我的git下载(https: ...
- echarts画中国地图，省市区地图分享
中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map
- MULTIPOLYGON、POLYGON 封装为echart geoJson 数据封装
一.环境.问题简述: 1.采用的事前后端分离,后端需要封装将点位获取的点位信息封装为geoJson数据类型,供前端利用echart 绘制地图: 2.思路:简单理解geoJson,将对应坐标点位封装为g ...
- Alpha 冲刺11——总结
拖鞋旅游队团队事后诸葛亮会议 前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10054510.html 时间:2018-12-1 20:00 地 ...
- Alpha冲刺3
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9971198.html 作业博客:https://edu.cnblogs.com/campus/ ...
随机推荐
- TitleBar 的那些设置
设置状态栏透明: View decorView = activity.getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYO ...
- 2.4 Apache Axis2 快速学习手册之XMLBeans 构建Web Service
4. 使用XMLBeans生成服务(通过xml bean 命令将wsdl 文件生成java 代码) 要使用XMLBeans生成服务,请执行以下步骤. 通过在Axis2_HOME / samples / ...
- 开发FTP不要使用sun.net.ftp.ftpClient
转自:http://cai21cn.iteye.com/blog/700188 在开发一个web应用过程中,需要开发一个服务使用ftp功能将数据传输一个网外的ftp服务器.最初使用sun.net.ft ...
- flink source code
https://github.com/apache/flink/tree/master/docs https://github.com/flink-china/1.6.0 https://github ...
- 【Java】Java Queue的简介
阻塞队列 阻塞队列有几个实现: ArrayBlockingQueue LinkedBlockingQueue PriorityBlockingQueue DelayQueue SynchronousQ ...
- 【Java虚拟机】浅谈Java虚拟机
跨平台 Java的一大特性是跨平台,而Java是如何做到跨平台的呢? 主要依赖Java虚拟机,具体来说,是Java虚拟机在各平台上的实现. Java虚拟机在不同的平台有不同的实现.同一份字节码,通过运 ...
- mxnet：基础知识和一个简单的示例
NDArray与NumPy的多维数组类似,但NDArray提供了更多的功能:GPU和CPU的异步计算:自动求导.这使得NDArray能更好地支持机器学习. 初始化 from mxnet import ...
- 【iCore1S 双核心板_FPGA】例程十：乘法器实验——乘法器的使用
实验现象: 通过FPGA 的一个I/O 口连接LED:设定I/O 为输出模式.内部乘法器完成乘法计算后改变输出LED 的状态(红色LED 闪烁). 核心代码: module MULT( input C ...
- Brainfuck反汇编-高级版(Python)
import re def sym2cal(s): if '>' in s: return len(s) else: return -len(s) def cal(s): if '+' in s ...
- Web - JSONP和同源策略漫谈
0x00 前言 关于JSONP网上有很多文章了,我也是在拜读了别人的文章的基础上来写写自己的看法,这样可以加深自己印象,巩固一下学习效果.我们需要做的就是站在巨人的肩膀上眺望远方. 0x01 起 在W ...