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/ ...
随机推荐
- Kubernetes1.2如何使用iptables
转:http://blog.csdn.net/horsefoot/article/details/51249161 本次分析的kubernetes版本号:v1.2.1-beta.0. Kubernet ...
- mysql索引hash索引和b-tree索引的区别
Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...
- linux每日命令(28)：chgrp命令
在linux系统里,文件或目录的权限的掌控以拥有者及所属群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...
- Asp.Net EF查看生成sql（MiniProfiler）
查看ef生成的sql有很多种方法,这里介绍两种几种的方法 方法1:浏览器直接方法/Home/getsql直接查看sql //方法1:浏览器直接方法/Home/getsql直接查看sql public ...
- 命名实体识别，使用pyltp提取文本中的地址
首先安装pyltp pytlp项目首页 单例类(第一次调用时加载模型) class Singleton(object): def __new__(cls, *args, **kwargs): if n ...
- 自定义progressdialog，改善用户体验
自定义progressdialog,改善用户体验
- Spark学习笔记——泰坦尼克生还预测
package kaggle import org.apache.spark.SparkContext import org.apache.spark.SparkConf import org.apa ...
- 字符串时间与Unix时间戳相互转换
字符串时间与Unix时间戳相互转换 /** * @Author: wangkun * @Date : 2016/1/21 13:43 * @Description : 字符串时间转换为Unix时间戳 ...
- spring与quartz定时器
参考: http://www.iteye.com/topic/399980 http://www.cnblogs.com/xrab/p/5850186.html
- python通过input()函数输入的内容是什么类型
说明: 通过input()函数,可以从标准输入读取内容,那么读到的内容是什么类型呢. 通过type()函数可以进行判断,另外,通过input()函数的官方解释,从标准输入读取一个字符串.所以,应该是字 ...