<!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语言 · 递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB      问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数 ...

  2. [uart]stty命令使用

    中文解释链接:http://linux.51yip.com/search/stty 英文解释链接:http://pubs.opengroup.org/onlinepubs/9699919799/uti ...

  3. linux rename 和?????

    [root@ob2 mytmp]# ls01.txt  02.txt  03.txt  aa2.txt  aa.sh  aa.txt  tp_2017-09-143516.tar.gz  tt [ro ...

  4. C#捕获鼠标消息

    在C#中怎样禁用鼠标按键,我们可以通过ImessageFilter接口下的PreFilterMessage方法.Application类的AddMessageFilter方法,RemoveMessag ...

  5. Rattle：数据挖掘的界面化操作

    R语言是一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具.这里的统计计算可以是数据分析.建模或是数据挖掘等,通过无数大牛提供的软件包,可以帮我们轻松实现算法的实施. 一些读者 ...

  6. python 两个字典合并

    dict1={1:[1,11,111],2:[2,22,222]}dict2={3:[3,33,333],4:[4,44,444]}合并两个字典得到类似 {1:[1,11,111],2:[2,22,2 ...

  7. (四)Qt实现自定义模型基于QAbstractTableModel （一般）

    Qt实现自定义模型基于QAbstractTableModel 两个例子 例子1代码 Main.cpp #include <QtGui> #include "currencymod ...

  8. 关于Cocos2d-x中使用完Blink动作后精灵突然消失的问题的解决

    精灵使用Blink 执行完动作之后,消失不见了,原因是闪烁的过程中精灵刚好到空纹理(透明)的那部分,这时候用户通过某种操作中断闪烁动作,导致下个状态的时候,精灵依然停留在空纹理的状态.所以最好在精灵执 ...

  9. android BroadCastRecevier笔记

    学习android的Broadcast,笔记记录于此. BroadCastRecevier用于接受其他应用发送的广播. BroadCastReceiver工作,需要2步. 创建Broadcast Re ...

  10. e669. 绘制缓冲图像

    To draw on a buffered image, create a graphics context on the buffered image. // Create a graphics c ...