echarts实现柱状图分页展示
<!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实现柱状图分页展示的更多相关文章
- Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）
分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...
- Django学习（5）优雅地分页展示网页
在我们平时浏览网页时,经常会遇到网页里条目很多的情形,这时就会用到分页展示的功能.那么,在Django中,是如何实现网页分类的功能的呢?答案是Paginator类. 本次分享讲具体展示如何利用Djan ...
- Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- C#-WebForm-组合查询（Queryable延迟查询、Intersect交集）、分页展示基础
组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- Decoration4：分页展示
现在我们实现前台List的分页展示,这也是最基本的要求 先看现在的Rest数据格式,在spring的默认返回中,分页用到的元素都已经在page节点中返回了,只要在前台合理利用就足够了 { " ...
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- express + jqPaginator 分页展示内容
写在前面的话 分页展示内容也是我们在页面开发中经常会遇到的需求 前端页面利用jqPaginator这个jquery插件来编写 后端利用mysql存储数据 开始敲代码 回顾sql知识 首先让我们回顾一下 ...
- jquery分页展示控件：kkpager
kkpager v1.2 js分页展示控件,传入简单参数就能使用的分页效果控件 准备工作,引入js.css <script type="text/javascript" sr ...
随机推荐
- Kettle转换或作业乱码
结果这样做还是乱码,其实这和
- 利用AbstractRoutingDataSource实现动态数据源切换
需求:系统中要实现切换数据库(业务数据库和his数据库) 网上很多资料上有提到AbstractRoutingDataSource,大致是这么说的 在Spring 2.0.1中引入了AbstractRo ...
- phalcon的CLI应用
CLI应用是命令行下执行的程序, 可以应用于定时任务,守护进程, 脚本, 公用命令等等. 最小的目录结构:app/config/config.phpapp/tasks/MainTask.phpapp/ ...
- [转]pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...
- iOS边练边学--UIGestureRecognizer手势识别器简单介绍
iOS 3.2之后,苹果退出了手势识别功能(Gesture Recognizer),在触摸事件处理方面,大大简化了开发者的开发难度. 一.UIGestureRecognizer UIGestureRe ...
- iOS边练边学--通知机制和键盘处理小练习
一.发送通知 NSNotification *note = [NSNotification notificationWithName:@"通知的名称,随便写,例如:你妈叫你回家吃饭" ...
- Hibernate- 开发环境准备
数据库:两张表,两者通过publisher_id构成关联关系. Book(图书表) CREATE TABLE `t_book` ( `id` int(11) NOT NULL AUTO_INCREME ...
- ERROR 1045 (28000): Access denied for user 'root'@'127.0.0.1' (using password: YES)
我的原因是在配置文件my.ini [mysqld]项,在其后加入了一句:skip-name-resolve 导致授权出现这个错误,把skip-name-resolve这项屏蔽了就好了. 场景2:对所有 ...
- mysql -- 模糊查询的四种方法
摘录自:http://www.jb51.net/article/48315.htm 1 %:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 ...
- smb使用 ------转载自http://blog.csdn.net/tlaff/article/details/5463068
一.在Linux系统中查看网络中Windows共享文件及Linux中的Samba共享文件: 常用到smbclient:用法如下 [root@localhost ~]# smbclient -L / ...