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的版本太低.找到问题原 ...
随机推荐
- 腾讯云-NGINX搭建静态网站
搭建静态网站 搭建Http静态服务器环境 任务时间:15min ~ 30min 搭建静态网站,首先需要部署环境.下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务. 00. ...
- 【laravel5.4】Baum无限极分类和collect助手函数、transform()中间件(转换数据)方法使用
1.目的,无限极分类 /* * getdepartment:获取[当前登录用户对应公司的所有有效部门] * DB::table ==>返回查询构造器结果,不会返回一个collect实例 * 而 ...
- 程序安装制作不用愁—Wise installation入门教程
http://blog.csdn.net/terryzero/article/details/6731925最近有个项目需要把别人的工具包装集成下,所以就随便找了个制作安装的工具,正好找到了Wise ...
- 房产地图google map的初步应用点滴.2)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...
- android离线地图源码
最近一直在玩Android手机,当然也忘不了在这个平台下搞些和地图相关的东西. Android手机自带了Google的地图软件,不过原来不支持离线浏览,所以很费流量,5.0版本以后可以支持离线浏览,需 ...
- Winform下让你的DataGridView控件支持点语法(即显示list中的子对象属性)
前言: 不想看前言的直接去看正文吧!另外文末有彩蛋. DataGridView可以支持多种数据源格式,比如DataTable和List. DataTable没啥特殊的,本身就是一张二维的表,可以和Da ...
- Java并发和多线程：序
近期,和不少公司的"大牛"聊了聊,当中非常多是关于"并发和多线程"."系统架构"."分布式"等方面内容的.不少问题, ...
- python pandas 计算相关系数
pandas 中df 对象自带相关性计算方法corr() , 可以用来计算DataFrame对象中所有列之间的相关系数(包括pearson相关系数.Kendall Tau相关系数和spearman秩相 ...
- python标准库介绍——7 cmath 模块详解
[Example 1-61 #eg-1-61] 所展示的 ``cmath`` 模块包含了一些用于复数运算的函数. ====Example 1-61. 使用 cmath 模块====[eg-1-61] ...
- ISE在win8.1的安装问题
问题1:.lic无法打开 打开:C:\Xilinx\14.6\ISE_DS\ISE\lib\nt64 思路是这样: 将libPortability.dll重命名(加尾缀.orig,意思是origina ...