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的版本太低.找到问题原 ...
随机推荐
- Spark GraphX 的数据可视化
概述 Spark GraphX 本身并不提供可视化的支持, 我们通过第三方库 GraphStream 和 Breeze 来实现这一目标 详细 代码下载:http://www.demodashi.com ...
- 【微信小程序】用户首次进入小程序拒绝授权，如何再次调用授权页面，获取用户信息userInfo
前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户 ...
- Android开发学习之Gallery和GridView浅析
一.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery还可以和ImageSwitcher组件结合使用来 ...
- jsp里面实现asp.net的Global文件内容。
Global.java文件: import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import ...
- Python练习笔记——对输入的数字进行加和
请您输入数字,每个数字采用回车结束,当您输入型号*时,则结束数字输入,输出所有数字的总和 def num_sum(): i = 0 while True: get_num = input(" ...
- OGG_GoldenGate数据表定义方式DEFGEN（案例）
2014-03-09 Created By BaoXinjian
- Python lstrip() 方法
描述 Python lstrip() 方法用于删除字符串头部指定的字符,默认字符为所有空字符,包括空格.换行(\n).制表符(\t)等. 语法 lstrip() 方法语法: S.lstrip([cha ...
- Objective-C中的@Property具体解释
Objective-C中的@Property具体解释 @Property (属性) class vairs 这个属性有nonatomic. strong. weak, retain. copy等等 我 ...
- 歌词字幕转换制作专家转换LRC-UTF，出错问题，乱码问题，格式问题
我使用歌词字幕转换制作专家把LRC字幕格式转换成UTF格式后竟然是乱码,求助怎么解决. 编码问题... 转换之前,要先把它处理成ANSI码.先用记事本打开lrc,然后文件-> 另存为,在对话框下 ...
- C# - 关于过期Token的解决方案
使用static来定义变量和过期时间 //===================== 初始化静态数据 ========================== #region ); //Access_To ...