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/ ...
随机推荐
- 图文剖析自己定义View的绘制（以自己定义滑动button为例）
自己定义View一直是横在Android开发人员面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看.ViewGroup继承View. View的子类.多是 ...
- 对于移动端 App，虚拟机注册或类似作弊行为有何应对良策？
1.APP攻击大致策略 对APP进行攻击的一般思路包括反编译APP代码.破解APP通讯协议.安装虚拟机自动化模拟: a.首先看能否反编译APP代码(例如Android APP),如果能够反编译,从代码 ...
- 物联网架构成长之路(11)-Redis缓存主从复制
1. 说明 在我的物联网平台框架框架中,会用到Redis这个中间件.作为EMQ权限认证的缓存.https://www.cnblogs.com/think-in-java/p/5123884.html ...
- vue设置默认地址和配送方式
1.截图 2.address.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- oracle 11g rac asm磁盘组增加硬盘
要增加磁盘的磁盘组为:DATA 要增加的磁盘为: /dev/sde1 在第一个节点上:[root@rac1 ~]# fdisk /dev/sdeDevice contains neither a va ...
- 【iCore1S 双核心板_FPGA】例程三：计数器实验——计数器的使用
实验现象: 程序下载成功后,程序中的计数器开始计数,每次计满后,计数器清零,三色LED中红色LED的状态反转.可以看到,红色LED以一定的时间间隔闪烁. 核心源代码: //-------------- ...
- 配置Django
第一步,安装Python,在这里下载,如果你安装在C:\Python27, 把C:\Python27;C:\Python27\Scripts;C:\Python27\Lib 加到你的Path 第二步: ...
- Spring Security 认证流程
请求之间共享SecurityContext原因:
- plsql 常用函数-转
PLSQL常用函数 1)处理字符的函数 || 或 CONCAT---并置运算符. 格式∶CONCAT(STRING1, STRING2) 例:’ABC’|| ’DE’=’ABCDE’ CONCAT(‘ ...
- Python实现无向图最短路径
一心想学习算法,很少去真正静下心来去研究,前几天趁着周末去了解了最短路径的资料,用python写了一个最短路径算法.算法是基于带权无向图去寻找两个点之间的最短路径,数据存储用邻接矩阵记录.首先画出一幅 ...