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( ...
随机推荐
- 04JS高级动态添加属性和删除属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- sulime运行 java 和 php
执行php脚本 1. 先配置好php环境变量 2. Tools -> Build System -> New Build System.... { "cmd" ...
- 图片与文字在div里实现垂直水平都居中
第一种方法,利用盒布局实现 <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...
- 开博第二篇：记一个利用JavaScript，编写PS脚本，开发图片量产工具
背景:身在一个有实业的电商公司,设计部的妹子们总是会有做不完的商品图片,当然了,要是做点有技术含量的美化工作也罢,但是最近她们很是无聊,总是要做一些重复性的工作,就比如如题所说的,图片量产,量产什么呢 ...
- 客户端持久化解决方案：indexedDB
客户端持久化解决方案:indexedDB indexedDB适合大量的结构化的数据存储:打开数据库和获取数据对象都是异步的: 需要开启事务,访问的objectStore都要是在开启的事务中. 数据库结 ...
- java代码收藏:获取HttpServletRequest中某一前缀的参数
public static Map getParametersStartingWith(ServletRequest request, String prefix) { Enumeration par ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- java 多线程使用方法及Socket的使用
public class newThread implements Runnable{ public void run(){ dosome(); } public void dosome(){ Sys ...
- 线性表A-B
1.顺序存储 #include<stdio.h> /* 设有两个顺序表A和B,且都递增有序,试写一算法,从A中删除与B中相同的那些元素,即求A-B */ #define getArrayL ...
- XML转化DS等
public class XmlData { /// <summary> /// 将DataTable对象转换成XML字符串 /// < ...