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 ...
随机推荐
- Spring中@Resource与@Autowired
问题 这其实就是@Autoware与@Resource没有正确的使用,这个错误是因为wmPoiOplogService这个变量装配方式是@Resource,按照@Resource的按名字查找的方式,并 ...
- [uart]UART中的硬件流控RTS与CTS
转自:http://blog.csdn.net/zeroboundary/article/details/8966586 在RS232中本来CTS 与RTS 有明确的意义,但自从贺氏(HAYES ) ...
- 深入理解Java虚拟机 -- 读书笔记（1）：JVM运行时数据区域
深入理解Java虚拟机 -- 读书笔记:JVM运行时数据区域 本文转载:http://blog.csdn.net/jubincn/article/details/8607790 本系列为<深入理 ...
- IE6、IE7、IE8、Firefox兼容性
整理关于IE6.IE7.IE8.Firefox兼容性CSS HACK问题 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/b ...
- 如何查看机器是否为vmware虚拟机
vmware虚拟机的网卡MAC地址一般都是005056开头的,可用ifconfig看一下,也可用dmesg |grep vm查看 艺搜参考 http://bbs.chinaunix.net/threa ...
- 数学符号arg含义
argument of the maximum/minimum arg max f(x): 当f(x)取最大值时,x的取值 arg min f(x):当f(x)取最小值时,x的取值 表示使目标函数取最 ...
- D方法 自动完成
控制器 public function insert(){ $Wztj = D("Wztj");if($vo=$Wztj->create()){ if($Wztj->a ...
- Latex的各种帽子
\hat{A} \widehat{A} \tilde{A} \widetilde{A} \overline{A} \underline{A} \overbrace{A} \underbrace{A} ...
- zqgame《每日一言》
优秀决策者九特质1.能够接受不确定性:2.做事懂得轻重缓急:3.善于聆听:4.能够长远地看问题:5.能够看到大局,以大局为重:6.做事不优柔寡断,干脆利索.立即行动:7.善于独立思考:8.能充分调动团 ...
- 【转】 PreTranslateMessage作用和使用方法
PreTranslateMessage作用和使用方法 PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用, ...