echart四川地图
2024-10-16 07:43:56
<%@ 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
效果展示：
最新文章
- HTML5漂亮实用的电子书
- MySQL的高可用设计方案的记录
- 【开源】LLMAnimator 60多种动画让你的应用动起来
- background属性
- 使用python求字符串或文件的MD5
- Use GraceNote SDK in iOS（一）通过序列化GDO查询专辑封面
- Swift - 标签条（UITabBar）标签页控制器（UITabBarController）用法
- HotSpot关联规则算法（2）-- 挖掘连续型和离散型数据
- 利用Needleman–Wunsch算法进行DNA序列全局比对
- hbase 性能优化 （转载）
- 除了使用new关键字,还有什么方法可以创建Java对象呢?
- 数学paper写作注意事项
- 2016-08-15T16:00:00.000Z 格式转换成yyyy-MM-dd HH:mm:ss格式
- iframe与src一个性质 当js中修改了src的值后会重新向后台发送请求 ；为了防止浏览器缓存问题 当我们修改src时候 需要添加不同的值 这样浏览器就不会从缓存中取值 而是重新发起后台请求
- Hbase_02、Hbase的常用的shell命令&Hbase的DDL操作&Hbase的DML操作(转)
- java web项目为什么我们要放弃jsp？
- .net core获取appsettings CustomSettings
- windows下搭建Cordova安卓环境
- 「BZOJ 3280」小R的烦恼
- 《python机器学习—预测分析核心算法》：构建预测模型的一般流程