1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>echarts图形插件使用</title>
  7. <script src="jquery.min.js"></script>
  8. <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-0-8/esl.js"></script>
  9.  </head>
  10.  
  11. <body>
  12.     <div id="main" style="height:400px;"></div>
  13.     <script type="text/javascript">
  14.     // 路径配置
  15.         require.config({
  16.              packages: [{
  17.             name: 'echarts',
  18.             location: 'echarts/src',
  19.             main: 'echarts'},
  20.         {name: 'zrender',
  21.             location: 'echarts/zrender/src', // zrender与echarts在同一级目录
  22.             main: 'zrender'
  23.         }
  24.     ]
  25.  
  26.         });
  27.         require(
  28.             [
  29.                 'echarts',
  30.                 'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
  31.             ],
  32.              function (echarts) {
  33.                  var myChart = echarts.init(document.getElementById('main'));
  34.                 var option = {
  35.                     timeline:{
  36.                         data:[
  37.                             '2002-01-01','2003-01-01'
  38.                         ],
  39.                         label : {
  40.                             formatter : function(s) {
  41.                                 return s.slice(0, 4);
  42.                             }
  43.                         },
  44.                         autoPlay : true,
  45.                         playInterval : 1000
  46.                     },
  47.             options:[
  48.             {
  49.                 title: {
  50.             text : '上海地图',
  51.             subtext : '-。-'
  52.         },
  53.         tooltip : {
  54.             trigger: 'item',
  55.             formatter: function(a){
  56.                 return a[2];
  57.             }
  58.         },
  59.         legend: {
  60.             orient: 'vertical',
  61.             x:'right',
  62.             data:['数据名称']
  63.         },
  64.         dataRange: {
  65.         x: 'left',
  66.         y: 'bottom',
  67.         splitList: [
  68.             {start: 1500},
  69.             {start: 900, end: 1500},
  70.             {start: 310, end: 1000},
  71.             {start: 200, end: 300},
  72.             {start: 10, end: 200, label: '10 到 200（自定义label）'},
  73.             {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
  74.             {end: 10}
  75.         ],
  76.         color: ['#E0022B', '#E09107', '#A3E00B']
  77.          },
  78.          roamController: {
  79.             show: true,
  80.             x: 'right',
  81.             mapTypeControl: {
  82.                 '上海': true
  83.             }
  84.         },
  85.         title : {'text':'2002上海PM均值'},
  86.         series : [
  87.             {
  88.                 type:'map',
  89.                 mapType: '上海',
  90.                 //'selectedMode' : 'single',
  91.                 selectedMode : 'single',
  92.                 itemStyle:{
  93.                     normal:{label:{show:true}},
  94.                     emphasis:{label:{show:true}}
  95.                 },
  96.  
  97.                 'data': [{name: '崇明县',value: Math.round(Math.random()*1000)},
  98.             {name: '宝山区',value: Math.round(Math.random()*1000)},
  99.             {name: '嘉定区',value: Math.round(Math.random()*1000)},
  100.             {name: '青浦区',value: Math.round(Math.random()*1000)},
  101.             {name: '杨浦区',value: Math.round(Math.random()*1000)},
  102.             {name: '虹口区',value: Math.round(Math.random()*1000)},
  103.             {name: '闸北区',value: Math.round(Math.random()*1000)},
  104.             {name: '普陀区',value: Math.round(Math.random()*1000)},
  105.             {name: '静安区',value: Math.round(Math.random()*1000)},
  106.             {name: '黄浦区',value: Math.round(Math.random()*1000)},
  107.             {name: '卢湾区',value: Math.round(Math.random()*1000)},
  108.             {name: '长宁区',value: Math.round(Math.random()*1000)},
  109.             {name: '徐汇区',value: Math.round(Math.random()*1000)},
  110.             {name: '浦东新区',value: Math.round(Math.random()*1000)},
  111.             {name: '松江区',value: Math.round(Math.random()*1000)},
  112.             {name: '闵行区',value: Math.round(Math.random()*1000)},
  113.             {name: '金山区',value: Math.round(Math.random()*1000)},
  114.             {name: '奉贤区',value: Math.round(Math.random()*1000)},
  115.             {name: '南汇区',value: Math.round(Math.random()*1000)}]
  116.             }
  117.         ]
  118.         },
  119.         {
  120.             title : {'text':'2003上海PM均值'},
  121.             series : [
  122.                 {'data': [{name: '崇明县',value: Math.round(Math.random()*1000)},
  123.             {name: '宝山区',value: Math.round(Math.random()*1000)},
  124.             {name: '嘉定区',value: Math.round(Math.random()*1000)},
  125.             {name: '青浦区',value: Math.round(Math.random()*1000)},
  126.             {name: '杨浦区',value: Math.round(Math.random()*1000)},
  127.             {name: '虹口区',value: Math.round(Math.random()*1000)},
  128.             {name: '闸北区',value: Math.round(Math.random()*1000)},
  129.             {name: '普陀区',value: Math.round(Math.random()*1000)},
  130.             {name: '静安区',value: Math.round(Math.random()*1000)},
  131.             {name: '黄浦区',value: Math.round(Math.random()*1000)},
  132.             {name: '卢湾区',value: Math.round(Math.random()*1000)},
  133.             {name: '长宁区',value: Math.round(Math.random()*1000)},
  134.             {name: '徐汇区',value: Math.round(Math.random()*1000)},
  135.             {name: '浦东新区',value: Math.round(Math.random()*1000)},
  136.             {name: '松江区',value: Math.round(Math.random()*1000)},
  137.             {name: '闵行区',value: Math.round(Math.random()*1000)},
  138.             {name: '金山区',value: Math.round(Math.random()*1000)},
  139.             {name: '奉贤区',value: Math.round(Math.random()*1000)},
  140.             {name: '南汇区',value: Math.round(Math.random()*1000)}]}
  141.             ]
  142.         }
  143.         ]
  144.             };
  145.                 myChart.setOption(option);
  146.  
  147.             }
  148.     );
  149.     </script>
  150. </body>
  151.  
  152. </html>

　　

echarts实现上海地域PM值（map、timeline）的更多相关文章

  1. MyBatis查询，返回值Map或List<Map>

    一.返回值Map 1.mapper.xml <select id="selectUserMapLimitOne" resultType="java.util.Has ...

  2. Map获取键值,Map的几种遍历方法

    Map 类提供了一个称为entrySet()的方法,这个方法返回一个Map.Entry实例化后的对象集.接着,Map.Entry类提供了一个 getKey()方法和一个getValue()方法,Map ...

  3. 三角形的优雅值(map和哈希表)

    给你 n 个三角形,每个三角形有一个优雅值,然后给出一个询问,每次询问一个三角形,求与询问的三角形,相似的三角形中的优雅值最大是多少.★数据输入第一行输入包括 n 一个数字,接下来 n 行,每行四个整 ...

  4. map（froeach改变值,map生成新数组）

    http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...

  5. 获取Echarts的DataZoom的起始值

    创建DataZoom拖动事件 myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);   //事件名, 相关联的方法名 var ecConfig = requi ...

  6. Map获取键值,Map的几种遍历方法 （转载）

    Map类提供了一个称为entrySet()的方法,这个方法返回一个Map.Entry实例化后的对象集.接着,Map.Entry类提供了一个getKey()方法和一个getValue()方法,Map.E ...

  7. 我为什么选择使用Go语言？

    谢孟军:EGO会员.GopherChina组织者.<Go Web编程>一书的作者,专注Golang技术架构.本文来自EGO会员群分享,入群方式见文末 在这里我主要想和大家分享一些Go和我个 ...

  8. 取出List<Map<String,Object>>里面Map的key:value值

    1.取出Map其中一个属性的值 Map map = new HashMap(); map.put("key1", "value1"); map.put(&quo ...

  9. Map和List集合嵌套取值

    遍历List的方法: List<User> list = new ArrayList();list = userMapper.getUserList();//从数据库取得list值for( ...

随机推荐

  1. beforefieldinit释义（2）

    首先来看一段代码: using System; namespace BeforeFieldInit { internal class Foo { Foo(){ Console.WriteLine(&q ...

  2. mysql 蠕虫复制

    INSERT into user_info(version,create_user_count,create_pc_count) select version,create_user_count,cr ...

  3. Python中关于try...finally的一些疑问

    最近看Vamei的Python文章,其中一篇讲异常处理的,原本看完没啥疑惑,或许是自己想的简单了. 看到评论,一个园友的问题引起我的兴趣. 他的问题是 def func(x): try: return ...

  4. python2.X和python3.X在同一平台下的切换技巧

    python2.X和python3.X在同一平台下的切换技巧 最近在自己的电脑上同时安装了python2.7.11和python3.5.1 在网上搜了一些答案,主要还是参照<learning p ...

  5. linux命令——scp

    scp linux系统之间基于ssh登录的安全copy文件或者目录.本地［local］—— 远程［remote］{文件} scp local_file remote_username@remote_i ...

  6. linux系统下安全管理

    1.引导程序安全 linux系统的root密码是很容易破解的,当然前提是你没有设置引导程序密码,如GRUB或LILO,为了防止通过引导程序破译root密码,强烈建 议设置GRUB或LILO的引导密码, ...

  7. C++ typeid实现原理

    最近看了boost::any类源码,其实现主要依赖typeid操作符.很好奇这样实现的时间和空间开销有多大,决定探一下究竟. VS2008附带的type_info类只有头文件,没有源文件,声明如下: ...

  8. docker 在esx上的网络配置

  9. 外网如何访问本地tomcat web服务器【转】

    转自:http://jingpin.jikexueyuan.com/article/49159.html 外网如何访问本地tomcat web服务器 作者: XHKJOE 发布时间:2015-07-1 ...

  10. 克鲁斯卡尔(Kruskal)算法

    # include <stdio.h> # define MAX_VERTEXES //最大顶点数 # define MAXEDGE //边集数组最大值 # define INFINITY ...