dataView 工具栏
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高','最低']
},
toolbox: {
show : true,
orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置,默认为全图右对齐,可选为:
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}(y坐标,单位px)
color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: , // 工具箱边框线宽,单位px,默认为0(无边框)
padding: , // 工具箱内边距,单位px,默认各方向内边距为5,
showTitle: true,
feature : {
mark : {
show : true,
title : {
mark : '辅助线-开关',
markUndo : '辅助线-删除',
markClear : '辅助线-清空'
},
lineStyle : {
width : ,
color : '#1e90ff',
type : 'dashed'
}
},
dataZoom : {
show : true,
title : {
dataZoom : '区域缩放',
dataZoomReset : '区域缩放-后退'
}
},
dataView : {
show : true,
title : '数据视图',
readOnly: true,
lang : ['数据视图', '关闭', '刷新'],
optionToContent: function(opt) {
var axisData = opt.xAxis[].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[].name + '</td>'
+ '<td>' + series[].name + '</td>'
+ '</tr>';
for (var i = , l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[].data[i] + '</td>'
+ '<td>' + series[].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
magicType: {
show : true,
title : {
line : '动态类型切换-折线图',
bar : '动态类型切换-柱形图',
stack : '动态类型切换-堆积',
tiled : '动态类型切换-平铺'
},
type : ['line', 'bar', 'stack', 'tiled']
},
restore : {
show : true,
title : '还原',
color : 'black'
},
saveAsImage : {
show : true,
title : '保存为图片',
type : 'jpeg',
lang : ['点击本地保存']
},
myTool : {
show : true,
title : '自定义扩展方法',
icon : 'image://../asset/ico/favicon.png',
onclick : function (){
alert('myToolHandler')
}
}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : ,
end :
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i = ; i <= ; i++) {
list.push('2013-03-' + i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最高',
type:'line',
data:function (){
var list = [];
for (var i = ; i <= ; i++) {
list.push(Math.round(Math.random()* ));
}
return list;
}()
},
{
name:'最低',
type:'line',
data:function (){
var list = [];
for (var i = ; i <= ; i++) {
list.push(Math.round(Math.random()* ));
}
return list;
}()
}
]
};
http://echarts.baidu.com/echarts2/doc/example/toolbox.html
dataView 工具栏的更多相关文章
- ECharts学习(3)--toolbox(工具栏)
1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...
- [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...
- ECharts学习(1)--toolbox(工具栏)
1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...
- ehcarts之toolbox,工具栏
toolbox 工具栏.内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具. feature各工具配置项.具体显示功能 1.saveAsImage 保存为图片. 2.restore 还 ...
- ASP.NET Aries 入门开发教程5:自定义列表页工具栏区
前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...
- 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一
如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...
- 基于 SailingEase WinForm Framework 开发客户端程序(3:实现菜单/工具栏按钮的解耦及状态控制)
本系列文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以 SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...
- arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
随机推荐
- java jvm内存管理/gc策略/参数设置
1. JVM内存管理:深入垃圾收集器与内存分配策略 http://www.iteye.com/topic/802638 Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想 ...
- [POI2001]和平委员会
题目描述 根据宪法,Byteland民主共和国的公众和平委员会应该在国会中通过立法程序来创立. 不幸的是,由于某些党派代表之间的不和睦而使得这件事存在障碍. 此委员会必须满足下列条件: 每个党派都在委 ...
- Jenkins自动打包配置
当时也是花费了不少时间来配置Jenkins自动打包的问题,觉得还是需要记录一下. 1.安装Jenkins,这个很简单,不需要多说. 2.下载Git Plugin,Gradle Plugin,Andro ...
- JavaEE之注解
1注解:Annotation注解,是一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次,给计算机,JVM提供解读信息的. 2注解的作用:编译检查:代码分析,编 ...
- Idea中解决Git中pull代码内容冲突
Git开发中,由于项目开发人员不只一个,所以在代码开发中,多个开发人员可能会对同一文件同一地方的代码进行修改,这样在先后提交到master上时,就会产生冲突,以下是演示冲突产生和解决冲突的示例: 1. ...
- 【P3254】圆桌问题(最大流,洛谷)
看到题目,产生第一反应,是否可以匹配的是这么多.那么连边跑一遍最大流就行了. 从源点向每个单位连一条长度为l的边,然后所有单位和餐桌分别连边,流量为1,所有餐桌向汇点连边,流量为餐桌容量.然后跑一遍最 ...
- HDU 1159 Common Subsequence 动态规划
2017-08-06 15:41:04 writer:pprp 刚开始学dp,集训的讲的很难,但是还是得自己看,从简单到难,慢慢来(如果哪里有错误欢迎各位大佬指正) 题意如下: 给两个字符串,找到其中 ...
- xml简介与使用
Xml是什么? XML:可扩展标记语言 1.与HTML相似,HTML注重页面·展示 2.xml注重于数据的保存 3.无需预编译 4.符合w3c的标准 可扩展:可以自定义 标记:计算机所能认知的信息符号 ...
- JSP内置对象及作用
JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): request 用户端请求,此请求会包含来自GET/POST请求的参数 response 网页传回用户端的回应 pageContex ...
- java.util.logging.Logger_01
1.参考网址 1.1.java.util.logging.Logger使用详解 http://lavasoft.blog.51cto.com/62575/184492 1.2.Java内置Logger ...