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/ ...
随机推荐
- js 学习
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Fluent动网格【7】：网格节点运动
在动网格中,对于那些既包含了运动也包含了变形的区域,可以通过UDF来指定区域中每一个节点的位置.这给了用户最大的自由度来指定网格的运动.在其他的动网格技术中(如重叠网格)则很难做到这一点.定义网格节点 ...
- pandas DataFrame(2)-行列索引及值的获取
pandas DataFrame是二维的,所以,它既有列索引,又有行索引 上一篇里只介绍了列索引: import pandas as pd df = pd.DataFrame({'A': [0, 1, ...
- 【九天教您南方cass 9.1】 10 DTM土方计算的四种方法
同学们大家好,欢迎收看由老王测量上班记出品的cass9.1视频课程 我是本节课主讲老师九天. 我们讲课的教程附件也是共享的,请注意索取测量空间中. [点击索取cass教程]5元立得 (给客服说暗号:“ ...
- [备份]EntityFramework
本视频和分步演练介绍通过 Code First 开发建立新数据库.这个方案包括建立不存在的数据库(Code First 创建)或者空数据库(Code First 向它添加新表).借助 Code Fir ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 【HTTP】 认证和单点登录 【瞎写的…】
■ Cookie,Session,Token HTTP协议是一种无状态的协议.换言之,每一个HTTP请求在得到HTTP回应之后就会断开客户端到服务端的连接.客户端可能会有下一次请求,但是那是下一次的事 ...
- 80x86的保护模式
什么是保护模式? 通过对程序使用的存储区采用分段.分页的存储管理机制, 达到分组使用.互不干扰的保护目的.能为每个任务提供一台虚拟处理器,使每个任务单独执行,快速切换. 所以,内存地址由段基地址.偏移 ...
- Java如何替换所有指定（出现）的字符串？
在Java编程中,如何替换所有指定(出现)的字符串? 以下示例演示如何使用Matcher类的replaceAll()方法替换字符串中的所有出现的子字符串. package com.yiibai; im ...
- Nginx配置详细
######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...