<!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. docker centos7 dbus error解决方法

    在centos7 上使用centos7的docker镜像结果不能使用systemd,提示 Failed to get D-Bus connection: No connection to servic ...

  2. CentOS 6.5 x64下Hadoop安装

    Apache Hadoop安装部署模式 单机(本地)模式(Standalone Mode) 伪分布模式(Pseudo-Distributed Mode) 完全分布模式(Fully Distribute ...

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

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

  4. 电快速脉冲群EFT（概念）

    电快速瞬变脉冲群 简称EFT(Electrical Fast Transient)是指脉冲群有特定的持续时间(规定为15mS),特定的脉冲周期(300mS)的脉冲, 脉冲群中的单个脉冲有特定的重复周期 ...

  5. CodeIgniter(3.1.4)框架中设置默认控制器

    创建的目录结构: 如果是以上这种目录分布结构,则在controller文件夹下没有相应的控制器文件.如果在浏览器中直接使用 [http://localhost]则找不到相应的控制器. 必须进行以下设置 ...

  6. 《FPGA全程进阶---实战演练》第三章之PCB设计之过孔

    在画电路板时,往往需要过孔来切换层之间的信号.在PCB设计时,过孔的选择有盲孔,埋孔,通孔.如图3.1所示.盲孔是在表面或者底面打通到内层面,但不打穿,埋孔是在内层面之间的孔,不在表面和底面漏出:通孔 ...

  7. 【转】WCF入门教程四[WCF的配置文件]

    一.概述 配置也是WCF编程中的主要组成部分.在以往的.net应用程序中,我们会把DBConn和一些动态加载类及变量写在配置文件里.但WCF有所不同.他指定向客户端公开的服务,包括服务的地址.服务用于 ...

  8. Java的四种引用类型之弱引用

    先说结论: 首先,Java中有四种引用类型:强引用.软引用.弱引用.虚引用.-- 在 Java 1.2 中添加的,见 package java.lang.ref; . 其次,这几个概念是与垃圾回收有关 ...

  9. V4L2编程 视频采集-范例

    http://linuxtv.org/downloads/legacy/video4linux/API/V4L2_API/v4l2spec/: http://blog.csdn.net/kangear ...

  10. （转）SDL 1.2 to 2.0 Migration Guide--SDL1.2更新到SDL2.0指南

    SDL 1.2 to 2.0 Migration Guide 目录 SDL 1.2 to 2.0 Migration Guide Translations Introduction Overview ...