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( ...
随机推荐
- HTML构成及基本标签
超文本标记语言:HTML W3C:互联网联盟 注释语法:<!--注释掉的内容--> 标签格式: 双标签元素:<标签名 属性 style="样式">内容< ...
- SQL Server插入中文数据后出现乱码
今天在做项目的过程中遇到如标题的问题,情况如下图: 数据库使用的是SQL Server2012版本,创建表的脚本如下: CREATE TABLE [dbo].[Type]( [TypeId] INT ...
- Spring-----3、Spring的核心机制（依赖注入）
转载自:http://blog.csdn.net/hekewangzi/article/details/41345237
- Spring-----Spring对AOP的支持
转载自:http://blog.csdn.net/hekewangzi/article/details/51713002
- CSS 3 属性学习 —— 1. Gradient 渐变
CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数: <linear-gradient> = li ...
- Redis解决强制关闭Redis快照导致不能持久化错误
今天在使用composer添加Redis缓存的时候,运行Redis发生错误: 127.0.0.1:6379> set dachou dadachou (error) MISCONF Redis ...
- Gradle templates 的使用
使用gradle 时有一些繁琐的创建工程 使用插件的步骤. 这些步骤可以使用一些gradle的模板来代替. 具体的操作步骤: 安装gradle: Prerequired: Java SDK insta ...
- android应用开发全程实录-你有多熟悉listview
http://blog.csdn.net/notice520/article/details/7040962 今天给大家带来<android应用开发全程实录>中关于listview和ada ...
- docker 在esx上的网络配置
- 大数据为什么要选择Spark
大数据为什么要选择Spark Spark是一个基于内存计算的开源集群计算系统,目的是更快速的进行数据分析. Spark由加州伯克利大学AMP实验室Matei为主的小团队使用Scala开发开发,其核心部 ...