<!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. 应聘Java笔试时可能出现问题及其答案

    有感:应聘Java笔试时可能出现问题及其答案 huij 前段时间因为要参加一个笔试,在准备期间在网上找到了两条关于笔试题目的文章,其中一篇为<<有感:应聘Java笔试时可能出现问题> ...

  2. 使用嵌入文档Here Documents

    Unix/Linux Shell编程实战:使用嵌入文档Here Documents 一.Here Documents(嵌入文档)Here Documents作为重定向的一种方式,指示shell从源文件 ...

  3. 【C#】访问泛型中的List列表数据

    光看标题的确不好说明问题,下面描述一下问题场景: 已知后端自定义的返回的Json数据结构如下: response: { "message": "返回成功", & ...

  4. [Linux应用]Linux应用程序输出数据重定向到文件中

    转自:http://blog.chinaunix.net/uid-20680966-id-4698387.html 目的是要让程序的printf的打印能重定向到某个文本中,ctrl+c强制退出后查看文 ...

  5. Ubuntu下安装Apache

    Ubuntu为我们提供了 su apt-get install 命令,通过它你可以很方便地安装一些软件,这些软件是放在Ubuntu放置在各个地方的服务器上面,如果你想安装的软件是比较常见的,一般都可以 ...

  6. linux 中的进程wait（）和waitpid函数，僵尸进程详解，以及利用这两个函数解决进程同步问题

    转载自:http://blog.sina.com.cn/s/blog_7776b9d3010144f9.html 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / wait ...

  7. java资料——顺序存储结构和链式存储结构（转）

    顺序存储结构 主要优点 节省存储空间,随机存取表中元素 缺    点 插入和删除操作需要移动元素 在计算机中用一组地址连续的存储单元依次存储线性表的各个数据元素,称作线性表的顺序存储结构. 顺序存储结 ...

  8. mysql 授权的时候库名不能添加单引号homestead.* 写成 '库名'.* 错的语法

    create user 'wechat'@'192.168.10.%' identified by 'xxxxx'; create database 库名DEFAULT CHARSET utf8 CO ...

  9. html精灵技术（用来显示图片的某个区域）

    .left .left_down li.a.left-down-pic{display:block;width:50px;height:50px;background:url(images/app_i ...

  10. bcm53344 gpio驱动分析

    /********************************************************************************* * 1.查看代码是在vim下,使用 ...