echarts实现上海地域PM值（map、timeline）
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>echarts图形插件使用</title>
<script src="jquery.min.js"></script>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-0-8/esl.js"></script>
</head> <body>
<div id="main" style="height:400px;"></div>
<script type="text/javascript">
// 路径配置
require.config({
packages: [{
name: 'echarts',
location: 'echarts/src',
main: 'echarts'},
{name: 'zrender',
location: 'echarts/zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
] });
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (echarts) {
var myChart = echarts.init(document.getElementById('main'));
var option = {
timeline:{
data:[
'2002-01-01','2003-01-01'
],
label : {
formatter : function(s) {
return s.slice(0, 4);
}
},
autoPlay : true,
playInterval : 1000
},
options:[
{
title: {
text : '上海地图',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['数据名称']
},
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定义label）'},
{start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
{end: 10}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'上海': true
}
},
title : {'text':'2002上海PM均值'},
series : [
{
type:'map',
mapType: '上海',
//'selectedMode' : 'single',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
}, 'data': [{name: '崇明县',value: Math.round(Math.random()*1000)},
{name: '宝山区',value: Math.round(Math.random()*1000)},
{name: '嘉定区',value: Math.round(Math.random()*1000)},
{name: '青浦区',value: Math.round(Math.random()*1000)},
{name: '杨浦区',value: Math.round(Math.random()*1000)},
{name: '虹口区',value: Math.round(Math.random()*1000)},
{name: '闸北区',value: Math.round(Math.random()*1000)},
{name: '普陀区',value: Math.round(Math.random()*1000)},
{name: '静安区',value: Math.round(Math.random()*1000)},
{name: '黄浦区',value: Math.round(Math.random()*1000)},
{name: '卢湾区',value: Math.round(Math.random()*1000)},
{name: '长宁区',value: Math.round(Math.random()*1000)},
{name: '徐汇区',value: Math.round(Math.random()*1000)},
{name: '浦东新区',value: Math.round(Math.random()*1000)},
{name: '松江区',value: Math.round(Math.random()*1000)},
{name: '闵行区',value: Math.round(Math.random()*1000)},
{name: '金山区',value: Math.round(Math.random()*1000)},
{name: '奉贤区',value: Math.round(Math.random()*1000)},
{name: '南汇区',value: Math.round(Math.random()*1000)}]
}
]
},
{
title : {'text':'2003上海PM均值'},
series : [
{'data': [{name: '崇明县',value: Math.round(Math.random()*1000)},
{name: '宝山区',value: Math.round(Math.random()*1000)},
{name: '嘉定区',value: Math.round(Math.random()*1000)},
{name: '青浦区',value: Math.round(Math.random()*1000)},
{name: '杨浦区',value: Math.round(Math.random()*1000)},
{name: '虹口区',value: Math.round(Math.random()*1000)},
{name: '闸北区',value: Math.round(Math.random()*1000)},
{name: '普陀区',value: Math.round(Math.random()*1000)},
{name: '静安区',value: Math.round(Math.random()*1000)},
{name: '黄浦区',value: Math.round(Math.random()*1000)},
{name: '卢湾区',value: Math.round(Math.random()*1000)},
{name: '长宁区',value: Math.round(Math.random()*1000)},
{name: '徐汇区',value: Math.round(Math.random()*1000)},
{name: '浦东新区',value: Math.round(Math.random()*1000)},
{name: '松江区',value: Math.round(Math.random()*1000)},
{name: '闵行区',value: Math.round(Math.random()*1000)},
{name: '金山区',value: Math.round(Math.random()*1000)},
{name: '奉贤区',value: Math.round(Math.random()*1000)},
{name: '南汇区',value: Math.round(Math.random()*1000)}]}
]
}
]
};
myChart.setOption(option); }
);
</script>
</body> </html>
echarts实现上海地域PM值（map、timeline）的更多相关文章
- MyBatis查询，返回值Map或List<Map>
一.返回值Map 1.mapper.xml <select id="selectUserMapLimitOne" resultType="java.util.Has ...
- Map获取键值,Map的几种遍历方法
Map 类提供了一个称为entrySet()的方法,这个方法返回一个Map.Entry实例化后的对象集.接着,Map.Entry类提供了一个 getKey()方法和一个getValue()方法,Map ...
- 三角形的优雅值(map和哈希表)
给你 n 个三角形,每个三角形有一个优雅值,然后给出一个询问,每次询问一个三角形,求与询问的三角形,相似的三角形中的优雅值最大是多少.★数据输入第一行输入包括 n 一个数字,接下来 n 行,每行四个整 ...
- map（froeach改变值,map生成新数组）
http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...
- 获取Echarts的DataZoom的起始值
创建DataZoom拖动事件 myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole); //事件名, 相关联的方法名 var ecConfig = requi ...
- Map获取键值,Map的几种遍历方法 （转载）
Map类提供了一个称为entrySet()的方法,这个方法返回一个Map.Entry实例化后的对象集.接着,Map.Entry类提供了一个getKey()方法和一个getValue()方法,Map.E ...
- 我为什么选择使用Go语言？
谢孟军:EGO会员.GopherChina组织者.<Go Web编程>一书的作者,专注Golang技术架构.本文来自EGO会员群分享,入群方式见文末 在这里我主要想和大家分享一些Go和我个 ...
- 取出List<Map<String,Object>>里面Map的key:value值
1.取出Map其中一个属性的值 Map map = new HashMap(); map.put("key1", "value1"); map.put(&quo ...
- Map和List集合嵌套取值
遍历List的方法: List<User> list = new ArrayList();list = userMapper.getUserList();//从数据库取得list值for( ...
随机推荐
- 蜗牛爱课 -- iOS 设置UIButton的字体的大小、显示位置、大小
/设置按钮上的自体的大小 //[btn setFont: [UIFont systemFontSize: 14.0]]; //这种可以用来设置字体的大小,但是可能会在将来的SDK版本中去除改方法 ...
- git工作区和暂存区
工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区: 版本库(Repository) 工作区有一个隐藏目录.git,这个不算工作区, ...
- MySQL如何使用索引 较为详细的分析和例子
在数据库表中,使用索引可以大大提高查询速度. 假如我们创建了一个 testIndex 表: CREATE TABLE testIndex(i_testID INT NOT NULL,vc_Name V ...
- Hibernate防止SQL注入
如果在查询字段中输入单引号"'",则会报错,这是因为输入的单引号和其他的sql组合在一起编程了一个新的sql,实际上这就是SQL注入漏洞,后来我在前台和后台都对输入的字符进行了判断 ...
- HibernateDaoSupport的getSession()与HibernateTemplate的区别
在 Spring+Hibernate的集成环境里,如果DAO直接使用HibernateDaoSupport的getSession()方法获取 session进行数据操作而没有显式地关闭该session ...
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"的作用
为页面添加正确的DOCTYPE 很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用.DOCTYPE是document type的简写.主要用来说明你用的XHTML或者HTML是什么 ...
- Mac OS X：Dock 的附加功能
Dock 提供了可能并非显而易见的有用控件和菜单.通过修饰键的不同组合(如 Option 键.Control 键)及鼠标点按的不同类型(点按与按下及按住),即可使用下列附加功能.本文适用于 Mac O ...
- node.js 入门教程（beginnder guide
非常好的教程: node入门: JavaScript与Node.js JavaScript与你 简短申明 服务器端JavaScript “Hello World” 一个完整的基于Node.js的web ...
- Codeforces 325D
#include <cstdio> #include <algorithm> #include <cstring> #include <cstdlib> ...
- 关于关注和取消关注的nodejs写法
本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...