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的版本太低.找到问题原 ...
随机推荐
- Android 进程间通信——Service、Messenger
概述 介绍绑定服务端的三种方式:同一进程绑定服务.跨进程绑定服务(Messenger).跨进程绑定服务(aidl). 重点说一下通过Messenger.Service实现的进程间通信. 详细 代码下载 ...
- java多线程(二)之实现Runnable接口
一.java多线程方式2: 实现Runnable接口 好处:a. 可以避免由于java单继承带来的局限性. b. 适合多个相同的程序的代码去处理同一个资源的情况, 把线程与程序的代码, 数据有效分离, ...
- idea中pom.xml关于oracle配置
由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库. Orace驱动的下载:htt ...
- 解决修改计算机名后tfs连接不上的错误
1,用vs 自带的工具命令 tf workspaces 查看集合 2,执行命令: >tf workspaces /collection:https://aaaa.visualstudio.com ...
- iOS - CFSocket 的使用
1.CFSocket 苹果对对底层 BSD Socket 进行轻量级的封装(纯 C). 主要使用的 API:CFSocekt 用于建立连接,CFStream 用于读写数据. 2.基本使用 2.1 Cl ...
- Unix环境高级编程(十四)守护进程实现时间服务器
守护进程是在后台运行不受终端控制的进程(如输入.输出等),一般的网络服务都是以守护进程的方式运行.守护进程脱离终端的主要原因有两点:(1)用来启动守护进程的终端在启动守护进程之后,需要执行其他任务.( ...
- Bitmap具体解释与Bitmap的内存优化
感觉这里的排版看着更舒服些 Bitmap具体解释与Bitmap的内存优化 一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之中的一个.用它能够获取图像文件信息,进行图像剪切. ...
- WinForm窗体键盘事件，支持方向键和回车键
/// <summary> /// 快捷键操作 /// </summary> protected override bool ProcessCmdKey(ref Message ...
- Tree通用的系列方法列表-treepanel
在项目中经常会用到Tree来显示数据进行操作.今天整理出来一系列操作Tree的方法.可供项目中方便调用.不用重复写代码,快速应用,通用性很强. Tree系列方法列表如下:主要针对的是ext.net中的 ...
- app hybrid
package com.note.testcases; /** * * The MIT License (MIT) * * Copyright (c) 2016 Alejandro Gómez Mor ...