echart 地图
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="UTF-8">
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<h2>Hello World!</h2> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1600px;height:1400px;"></div>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); function setTimeDraw(execTiemes)
{
$.ajax({
type: "POST",
url: "/chinaMapdata",
data:{type:},
dataType: "json",
success: function(mapdata){
console.log(mapdata)
var option1 = myChart.getOption()
option1.series[].data=mapdata
myChart.setOption(option1)
},
error:function (err) {
console.log(err)
}
});
if(execTiemes>)
{
console.log(execTiemes);
execTiemes--;
setTime = setTimeout('setTimeDraw('+ execTiemes +')', ); }
else
{
clearTimeout(setTime);
} } function randomValue() {
return Math.round(Math.random()*);
} var option = {
tooltip: {},
visualMap: {
min: ,
max: ,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [],
inRange: {
color: ['#e0ffff', '#006edd']
},
calculable : true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: null,
shadowOffsetX: ,
shadowOffsetY: ,
shadowBlur: ,
borderWidth: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: ,
symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate: ,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
},
{
name: 'IP访问量',
type: 'map',
geoIndex: ,
// tooltip: {show: false},
data:[
{name: '北京', value: },
{name: '天津', value: },
{name: '上海', value: randomValue()},
{name: '重庆', value: randomValue()},
{name: '河北', value: randomValue()},
{name: '河南', value: randomValue()},
{name: '云南', value: randomValue()},
{name: '辽宁', value: randomValue()},
{name: '黑龙江', value: randomValue()},
{name: '湖南', value: randomValue()},
{name: '安徽', value: randomValue()},
{name: '山东', value: randomValue()},
{name: '新疆', value: randomValue()},
{name: '江苏', value: randomValue()},
{name: '浙江', value: randomValue()},
{name: '江西', value: randomValue()},
{name: '湖北', value: randomValue()},
{name: '广西', value: randomValue()},
{name: '甘肃', value: randomValue()},
{name: '山西', value: randomValue()},
{name: '内蒙古', value: randomValue()},
{name: '陕西', value: randomValue()},
{name: '吉林', value: randomValue()},
{name: '福建', value: randomValue()},
{name: '贵州', value: randomValue()},
{name: '广东', value: randomValue()},
{name: '青海', value: randomValue()},
{name: '西藏', value: randomValue()},
{name: '四川', value: randomValue()},
{name: '宁夏', value: randomValue()},
{name: '海南', value: randomValue()},
{name: '台湾', value: randomValue()},
{name: '香港', value: randomValue()},
{name: '澳门', value: randomValue()}
]
}
]
}; myChart.setOption(option); $(function () {
//查询5次
setTimeDraw();
})
</script>
</body>
</html>
echart 地图的更多相关文章
- Echart - 地图散点图(服务网点图)的实现
Echart是百度开发的一个javascript图表库,可以流程运行于pc和移动端,底层依赖轻量级的 Canvas 类库 ZRender. ECharts 提供了常规的折线图,柱状图,散点图,饼图,K ...
- echart地图下钻
需求:展示中国地图,鼠标点击显示对应的省份 在echart的github上下载需要的 地图文件China.js,各个省份的json文件 遇到的问题:直接在浏览器打开报错,跨域问题,用webstrom打 ...
- Echart地图城市用json返回格式
用Echarts中,使用地图的series部分中展示城市如果用json返回数据的话,js不能直接用字符串使用.需要处理一下. php中的部分 json返回的数据 js中获取json信息 用ajax实现 ...
- 百度Echart 地图
使用百度地图做一个全国地图数据分析的功能,如下图 代码 <%@ Page Language="C#" AutoEventWireup="true" Cod ...
- Echart 地图实例
1.地图实例 function func_InEchart() { require.config({ paths: { echarts: '../Scripts/echart2/echarts' }, ...
- echarts 点击方法总结，点任意一点获取点击数据，在多图联动中用生成标线举例
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...
- Echarts 南海诸岛简图显示位置调整
最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...
- echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...
- canvas实现平面迁徙图
前言 最近在做自己维护的一个可视化工具的时候,在添加基于echart的雷达图的时候,按照echart官网案例写完发现在自己项目中无法正常运行,排查了一番发现是我项目中echart的版本太低.找到问题原 ...
随机推荐
- CreateThread、_beginthreadex和AfxBeginThread .
创建线程好几个函数可以使用,可是它们有什么区别,适用于什么情况呢?参考了一些资料,写得都挺好的,这里做一些摘抄和整合. [参考1]CreateThread, AfxBeginThread,_begin ...
- HDUOJ ---1269迷宫城堡
http://acm.hdu.edu.cn/showproblem.php?pid=1269 迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- deque容器的运用一点一点积累
#include<iostream> #include<deque> #include<cstdio> #include<cstring> #inclu ...
- 如何用python轻松破解wifi密码( 源码 )
摘要: 我得说明下这个东西一点都不高端,甚至看起来有点糟糕.而且用的是单线程~,因为过几天要搬家了,于是.. 环境准备 python2.7 凑合的linux 差不多的无线网卡 pywifi模块 弱口令 ...
- QQ网页链接打开本地QQ.exe原理
一.观察现象 QQ推广上有相关文档 http://shang.qq.com/v3/widget.html 新建一个html,点击链接就会启动本地QQ. <html> <body> ...
- android中完全退出当前应用程序的四种方法
Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何关闭整个Android应用程序呢?本人总结了几种比较简单的实现方 ...
- go 学习笔记（1）--package
引入包有以下几种方式: 1. 最简单的方式引入一个包的方式是直接引入包,例如: import "fmt" import "os" 2. 也可以通过下面的方式将包 ...
- 【Oracle错误集锦】：ORA-12154: TNS: 无法解析指定的连接标识符
相信这个错误大家都不陌生,仅仅要安装使用过Oracle的预计都遇到过这个问题,一般出如今用PL/SQL连接Oracle数据库的时候发生的. 导致这个错误的原因以及解决方式都是多种多样的,我也是三番五次 ...
- Python endswith() 方法
描述 endswith() 方法用于判断字符串是否以指定后缀结尾,如果是则返回 True,否则返回 False. 语法 endswith() 方法语法: S.endswith(suffix[,star ...
- C#实现相似QQ的隐藏浮动窗口、消息闪动
功能简单介绍 当语音客服系统登录成功进入主界面时,本聊天工具将会自己主动隐藏在左下角位置,当鼠标移动到左下角时,自己主动弹出,当鼠标移开聊天窗口时,自己主动隐藏.假设想让聊天窗口固定在桌面.仅仅要拖动 ...