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 ...
随机推荐
- [script]判定某一个脚本是否正确执行
返回内容存在$?, 0代表成功,其他代表失败 some_command ]; then echo OK else echo FAIL fi 字符型的返回值 some_command retval=$? ...
- 指针的引用（*&）与指针的指针（**）
指针的引用(*&)与指针的指针(**) 在下列函数声明中,为什么要同时使用*和&符号?以及什么场合使用这种声明方式? void func1( MYCLASS *&pBuildi ...
- contiki 无线测试 1个中心节点 13个从节点
1 DATA recv '25.00 degres' from 2423:7c02:5525:4f2b2 DATA recv '27.71 degres' from 24f7:af03:5525:4f ...
- Hibernate- 基本查询
01.搭建开发环境 02.基本查询 package com.gordon.test; import java.text.DecimalFormat; import java.util.Arrays; ...
- PHP不能不看的50个细节！
1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP ...
- [R语言统计]频数表
频数表在统计学中是一个非常基本并且重要的概念,我们这里就来讲解它的基本用法. 首先我们需要载入数据,并查看数据的基本信息 install.packages('vcd') #安装vcd包,其中有可以利用 ...
- WebForm和MVC的一些知识（转）
转自:http://www.cnblogs.com/liuhf939/p/3417203.html 比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: ...
- 关于Cocos2d-x的动作和动画
1.动作,在cocos2d-x中有非常多种的动作,各种移动,旋转,缩放,淡入淡出....等等非常多,但是这些动作只是作用于节点,最常作用于的就是精灵节点.而且我们可以把很多个动作放进一个Sequenc ...
- C++ 有用的书籍
C++ 有用的书籍Essential C++ 中文版C++ Primer Plus 第6版中文版C++ Primer中文版(第5版) #include <iostream> /* run ...
- （转）YUV420存储格式
YUV格式有两大类:planar和packed.对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y,U ...