<%@ 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
效果展示：
