<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

             var option = {

                    timeline:{

                        data:[1,2,3,4],

                        label : {

                            formatter : function(s) { return "第"+s+"页"; }

                            },

                        autoPlay : false,

                        playInterval : 1000,

                                tooltip:{formatter : function(s) {return "第"+s.value+"页"; }}

                    },

                    options:[

                        {

                            title : {

                                'text':'全国宏观经济指标'

                            },

                            tooltip : {'trigger':'axis'},

                            legend : {

                                //x:'right',

                                'data':['GDP','房地产']

                            },

                            calculable : true,

                            grid : {'y2':80},

                            xAxis : [{

                                'type':'category',

                                //'axisLabel':{'interval':0},

                                'data':[ '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江'

                                ]

                            }],

                            yAxis : [

                                {

                                    'type':'value',

                                    'name':'GDP（亿元）',

                                    'max':3000

                                }

                            ],

                            series : [

                                {

                                    'name':'GDP','type':'bar',

                                    'data': [100,200,300,400,500,600,700,800]

                                },

                                {

                                    'name':'房地产','type':'bar',

                                    'data': [500,400,300,400,200,600,300,800]

                                } ]

                        },

                        {

                            series : [

                                {'data':  [200,300,400,500,600,700,800]},

                                {'data': [500,400,300,400,200,600,300]}

                            ],

                          xAxis:[{'data':['云南','西藏','陕西','甘肃','青海','宁夏','新疆']}]

                        },

                        {

                            series : [

                                {'data':  [1200,1300,400,500,600,700,800]},

                                {'data': [500,400,1300,400,1200,600,300]}

                            ],

                          xAxis:[{'data':[ '上海','江苏','浙江','安徽','福建','江西','山东']}]

                        },

                        {

                            series : [

                                {'data':  [1200,1300,400,500,600,700,800,900]},

                                {'data': [500,400,1300,400,1200,600,300,900]}

                            ],

                          xAxis:[{'data':['湖北','湖南','广东','广西','海南','重庆','四川','贵州']}]

                        }

                    ]

                };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

echarts实现柱状图分页展示的更多相关文章

  1. Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）

    分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...

  2. Django学习（5）优雅地分页展示网页

    在我们平时浏览网页时,经常会遇到网页里条目很多的情形,这时就会用到分页展示的功能.那么,在Django中,是如何实现网页分类的功能的呢?答案是Paginator类. 本次分享讲具体展示如何利用Djan ...

  3. Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  4. C#-WebForm-组合查询（Queryable延迟查询、Intersect交集）、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

  5. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  6. Decoration4：分页展示

    现在我们实现前台List的分页展示,这也是最基本的要求 先看现在的Rest数据格式,在spring的默认返回中,分页用到的元素都已经在page节点中返回了,只要在前台合理利用就足够了 { " ...

  7. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  8. express + jqPaginator 分页展示内容

    写在前面的话 分页展示内容也是我们在页面开发中经常会遇到的需求 前端页面利用jqPaginator这个jquery插件来编写 后端利用mysql存储数据 开始敲代码 回顾sql知识 首先让我们回顾一下 ...

  9. jquery分页展示控件：kkpager

    kkpager v1.2 js分页展示控件,传入简单参数就能使用的分页效果控件 准备工作,引入js.css <script type="text/javascript" sr ...

随机推荐

  1. C#写的工厂模式

    program.cs file using System; using System.Collections.Generic; using System.Text; namespace Console ...

  2. 【Unity笔记】UGUI的自动布局功能

    一些RectTransform的物体(UGUI元素)已经实现了ILayoutElement接口,如Image. 如果一个RectTransform的物体(UGUI元素)的其中一个组件实现了ILayou ...

  3. 【Unity/Kinect】Kinect实现UI控件的点击

    用体感来实现UI控件的点击,如点击按钮. 做法:用一个图片表示左手手掌,图片位置追踪左手手掌移动,当手掌位于UI控件的矩形内时,握拳表示点击该控件. using UnityEngine; using ...

  4. 【Android】使用Pull生成/解析XML文件

    一.生成XML文件,即是将对象集合转为XML文件存储. 对象集合 –> XML(序列化) Android中使用android.util.Xml类对其进行了描述,提供相应的API. 步骤大致如下: ...

  5. 将hive的hql执行结果保存到变量中

    这里分别针对shell脚本和python脚本举例: shell脚本如下: 注意:在hive语句左右两边使用的是ESC键下面的点号,不是单引号. #!/usr/bin/env bash test1=`h ...

  6. namp命令详解

    我将用两个不同的部分来涵盖大部分NMAP的使用方法,这是nmap关键的第一部分.在下面的设置中,我使用两台已关闭防火墙的服务器来测试Nmap命令的工作情况. 192.168.0.100 – serve ...

  7. linux 获取随机数的办法

    1.1.1 inux随机数的办法  http://www.2cto.com/kf/201410/342717.html 方法一.[root@ob ~]# date +%N  %N纳秒  随机获取的九位 ...

  8. 有趣的 Mysql 存储引擎

    Mysql 提供了一套统一的应用开发模型和核心 API,因此,尽管不同的存储引擎拥有不同的特性,不过对于开发人员,应用操作都是完全透明的.应用层的连接并不直接访问存储引擎层,而是访问 Mysql 提供 ...

  9. jQuery的Cookie操作插件

    jQuery的cookie插件 01 // jQuery.cookie.js 02 jQuery.cookie = function(name, value, options) { 03     if ...

  10. 使用特殊构造的5GB文件测试Win2012Dedup功能

    WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...