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个部分 ...
随机推荐
- centos、linux关机与重启命令详解
Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 1 ...
- Mac安装搭建sublimeText3开发Nodejs环境
原文] [基本环境 安装Nodejs 这个直接就可以去官网下载就可以了.Nodejs官网 根据自己的PC系统类型选择对应的版本下载之后就可以了. 安装SublimeText3 这个也是直接去Subli ...
- 完全理解Android中的RemoteViews
一.什么是RemoteViews RemoteViews翻译过来就是远程视图.顾名思义,RemoteViews不是当前进程的View,是属于SystemServer进程.应用程序与RemoteView ...
- SSH2 增删查改实例
(一)引入包 (共73个,不一定都需要,但是我的项目是这么多,经过调试,没有包冲突) (二)创建数据库表 建立数据库octtest,并创建user表,表里面一共4个字段:id,姓,名,年龄. 语句如下 ...
- 通过案例说明struts2的工作流程
本文主要是通过一个例子来说明Struts2的一个工作流程. 首先定义一个登录页面login.jsp: [java] view plaincopy <%@ page language=" ...
- Pandas级联
Pandas提供了各种工具(功能),可以轻松地将Series,DataFrame和Panel对象组合在一起. pd.concat(objs,axis=0,join='outer',join_axes= ...
- 用HyperMesh(7.0)手工修改网格
检查网格质量并修改 2D->qulifyindex:其中View/Edit/Optimize工具栏功能常用,尤其是Edit页中的Place Node,可以动态地拖动节点并观察单元质量是否符合要求 ...
- 处理跨线程操作问题(使用Action和delegate或lambda表达式)
方法A: Action f = () => { txtProcess.Text = "开始更新程序.. ...
- Ubuntu下Python使用MySQLdb远程连接数据库的常见问题及解决方案
本文基于http://www.cnblogs.com/fnng/p/3565912.html这篇博文,学习使用MySQLdb过程中遇到下面这些问题. 1. 安装MySQLdb时运行sudo pytho ...
- LeetCode OJ:Valid Palindrome(验证回文)
Valid Palindrome Given a string, determine if it is a palindrome, considering only alphanumeric char ...