<!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. 【Unity/Kinect】Kinect一些常用的API

    先开好这个坑,之后用到就补充,方便回顾. 获取用户相对Kinect传感器设备的位置坐标.(在Kinect坐标系中的位置) public Vector3 GetUserPosition(Int64 us ...

  2. Android——适配器其他组件（AutoCompleteTextView：自动完成文本编辑框；Spinner:下拉列表）

    activity_activitywenben.xml <?xml version="1.0" encoding="utf-8"?> <Lin ...

  3. yaffs2文件镜像制作工具yaffs2image

    1.  不同nand容量,工具不一样. 首先使用的是mkyaffs2image,编译生成根文件系统的镜像之后,下载到板子上,启动的时候报错,错误代码这里没有上传.问题出在工具使用的不正确,查看工具目录 ...

  4. Entity Framework应用：使用LINQ操作

    一.什么是LINQ TO EntitiesLINQ,全称是Language-INtegrated Query(集成语言查询),是.NET语言中查询数据的一种技术.LINQ to Entities是一种 ...

  5. C++11 新特性：Lambda 表达式

    参考文章:https://blogs.oracle.com/pcarlini/entry/c_1x_tidbits_lambda_expressions 或许,Lambda 表达式算得上是 C++ 1 ...

  6. Android isUserAMonkey()

    Monkey是Android上的一个自动化测试工具.产生随机事件由于压力测试等. ActivityManager.isUserAMonkey()判断当前是否有运行的Monkey测试.有就返回true. ...

  7. 编写一个Filter，除继承HttpServlet类外还需要（ ）。

    A．继承Filter 类 B．实现Filter 接口 C．继承HttpFilter 类 D．实现HttpFilter接口 解答:B

  8. if、for、while、do 等语句自占一行

    if.for.while.do 等语句自占一行,执行语句不得紧跟其后.不论 执行语句有多少都要加{}.这样可以防止书写失误. #include <iostream> /* run this ...

  9. C++ 有用的网站

    C++ 有用的网站C++ Programming Language Tutorials ? C++ 编程语言教程.C++ Programming ? 这本书涵盖了 C++ 语言编程.软件交互设计.C+ ...

  10. Android开源库集锦(转)

    一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才开始支持的,ActionBarSherlock是让Action Bar功能支持2.X后的所有平台, ...