echart 数据视图 样式重写
来源http://blog.csdn.net/u010705091/article/details/75212724
echarts折线图的数据视图样式重写
在echarts.js中，点击折线图的数据试图按钮，会以表格table的形式展示折线图中的数据，但是此时的table格式比较乱。如下图：
所以，为了展示美观需重写table的样式。echart.js的官方文档，是在配置项option中的toolbox属性中的dataview对象中重写optionToContent函数。其中class=”table-bordered table-striped”中的类为bootstrap自有的。（如果你嫌弃bootstrap太大，可以替换为 border-collapse:collapse;）
如下图：
optionToContent:function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table ='<table id="test" class="table-bordered table-striped" style="width:100%;text-align:center">',
var table = table + '<tbody><tr>'+ '<td>时间</td>'+ '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>'+ '</tr>';
}
table += '</tbody>';
return table;
}
dataTable()
首先引入dataTable的样式文件和js文件
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="js/datatable/jquery.dataTables.js"></script>
此时的解决方法是在数据试图的table 里添加名为nodeInserted 的动画：
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-moz-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-webkit-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-ms-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-o-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
.table-data-table {
animation-duration: 0.001s;
-o-animation-duration: 0.001s;
-ms-animation-duration: 0.001s;
-moz-animation-duration: 0.001s;
-webkit-animation-duration: 0.001s;
animation-name: nodeInserted;
-o-animation-name: nodeInserted;
-ms-animation-name: nodeInserted;
-moz-animation-name: nodeInserted;
-webkit-animation-name: nodeInserted;
}
.table-data-table {
animation-duration: 0.001s;
-o-animation-duration: 0.001s;
-ms-animation-duration: 0.001s;
-moz-animation-duration: 0.001s;
-webkit-animation-duration: 0.001s;
animation-name: nodeInserted;
-o-animation-name: nodeInserted;
-ms-animation-name: nodeInserted;
-moz-animation-name: nodeInserted;
-webkit-animation-name: nodeInserted;
}并在页面加载完后监听动画事件，以扑捉到table元素
window.onload = function() {
var insertListener = function(event){
// console.warn("Another node has been inserted! ", event);
if (event.animationName == "nodeInserted") {
$("#"+event.target.getAttribute("id")).DataTable();
console.log(event);
console.log($("#"+event.target.getAttribute("id")));
}
} ;
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
};
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<style type="text/css" >
.echarts-ht-5{
height: 500px;
/*background: gray;*/
}
/* set up the keyframes */
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-moz-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-webkit-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-ms-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
@-o-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
.table-data-table {
animation-duration: 0.001s;
-o-animation-duration: 0.001s;
-ms-animation-duration: 0.001s;
-moz-animation-duration: 0.001s;
-webkit-animation-duration: 0.001s;
animation-name: nodeInserted;
-o-animation-name: nodeInserted;
-ms-animation-name: nodeInserted;
-moz-animation-name: nodeInserted;
-webkit-animation-name: nodeInserted;
}
</style>
</head>
<body>
<h1>别问我静静是谁</h1>
<div class="container">
<div class="row" >
<div class="col-lg-12 echarts-ht-5" id="echarts-line-1">
</div>
</div>
<div class="row">
<div class="col-lg-12 echarts-ht-5" id="echarts-pie-1">
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/echarts/echarts.js"></script>
<script type="text/javascript" language="javascript" src="js/datatable/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderLineDemo();
renderPieDemo();
});
window.onload = function() {
var insertListener = function(event){
// console.warn("Another node has been inserted! ", event);
if (event.animationName == "nodeInserted") {
$("#"+event.target.getAttribute("id")).DataTable();
console.log(event);
console.log($("#"+event.target.getAttribute("id")));
}
} ;
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
};
function renderLineDemo(){
var echartLineDemo = echarts.init(document.getElementById('echarts-line-1'));
var option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: true,
optionToContent:function(opt) {
console.log(11111);
var axisData = opt.xAxis[0].data;
var series = opt.series;
var tableDom = document.createElement("table");
tableDom.setAttribute("id","test");
tableDom.setAttribute("class","table-data-table");
// <table id="test" class="table-bordered table-striped" style="width:100%;text-align:center"
var table = '<thead><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr></thead><tbody>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody>';
tableDom.innerHTML = table;
return tableDom;
}
},
saveAsImage: {
show:true,
title:'保存为图片'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
echartLineDemo.setOption(option);
}
function renderPieDemo(){
var echartsPieDemo = echarts.init(document.getElementById('echarts-pie-1'));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
echartsPieDemo.setOption(option);
}
</script>
</body>
</html>效果图如下：
之后就可以用dataTable里相应的配置来为table添加不同的功能。
样式调整其它案例：
https://www.cnblogs.com/chuningning/p/9181597.html
echart 数据视图 样式重写的更多相关文章
- echarts优化数据视图dataView中的样式
在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下: t ...
- echarts如何修改数据视图dataView中的样式
原文链接:点我 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格.在表格中遇到的一点小问题,解决方案如下: 1.场景重现 这是一个显示两个折线图的图表,一切看起来都很顺利.但是点 ...
- SharePoint 2013 Designer系列之数据视图
在SharePoint使用中,数据展示是一块很重要的部分,很多时候我们会采用webpart的形式,但是有一些情况,我们不必使用开发,仅需使用Designer即可,下面让我简单介绍下数据视图的使用. 1 ...
- Echarts 数据视图 生成Excel的方法
一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...
- WPF数据视图学习
当你绑定集合到ItemsControl,数据视图被安静地在幕后创造.视图位于数据源和绑定控件之间.数据视图是通往数据源的一个窗口.它跟踪当前项目,它支持诸如排序,过滤,和分组特征.这些特征独立于数据对 ...
- WPF数据模板样式选择器
在使用数据模板样式选择器时,不能设置ItemContainerStyle的属性值,如果设置了该值,那么数据模板样式选择器会失去作用. 在使用数据模板样式选择器时,首先要创建数据模板样式选择器对象,此对 ...
- 21 WPF数据视图
视图对象 当你绑定集合到ItemsControl,在幕后数据视图被安静地创造.视图位于数据源和绑定控件之间.数据视图是通往数据源的一个窗口.它跟踪当前项目,它支持诸如排序,过滤,和分组特征.这些特征独 ...
- tableau desktop(三)--构建数据视图（二）
前段时间忙于工作的事情,好久没有来记录一点东西了,今天利用周末做点记录吧,近期因为工作的原因,也有两三周没实用tableau了.今天继续上一篇构建数据试图(二). 3.7 參考线和參考区间 參考线通经 ...
- SharePoint 2013 Designer系列之数据视图筛选
在SharePoint中,我们经常需要对列表进行简单的筛选,这时,数据视图就有作用了,我们可以定制对于字段的筛选,来进行展示:特别的,筛选不同于搜索,并没有对于附件或者文档的全文检索,如果需要全文检索 ...
随机推荐
- 蒲公英： 一个提供App 存储、分发、Bug管理的网站
一.蒲公英内测应用, https://www.pgyer.com/ 内测应用,仅需两步: 将应用上传到网站,生成安装链接和二维码 用户在手机上打开安装链接,或扫码二维码,即可开始安装 二.蒲公英Bug ...
- bootstrap基础学习（四）——网格系统（列的偏移、排序、嵌套）
网格系统——列偏移.列排序.列嵌套 列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来.这个时候就可以使用列偏移(offset)功能来实现.使用列偏移也非 ...
- WPF ListBox的进阶使用（一）
公司项目有个需求,UI界面支持动态平均分割界面,想了想便想到用ListBox来实现,用UniformGrid作为ListBox的ItemsPanelTemplate,通过动态改变UniformGrid ...
- 关于ubuntu软件卸载的问题
...... 起因很菜....就是手贱把/usr/lib/下的R的目录给rm -rf掉了, 然后在R的软件包里用./configure也生不成, R RHOME还在, 然而因为lib下的R删掉了所以R ...
- leetcode 152. 乘积最大子序列 java
题目: 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. ...
- 最小割(zjoi2011,bzoj2229)(最小割树)
小白在图论课上学到了一个新的概念--最小割,下课后小白在笔记本上写下了如下这段话: "对于一个图,某个对图中结点的划分将图中所有结点分成两个部分,如果结点\(s,t\)不在同一个部分中,则称 ...
- Spring Boot log4j多环境日志级别的控制
之前介绍了在<Spring boot中使用log4j>,仅通过log4j.properties对日志级别进行控制,对于需要多环境部署的环境不是很方便,可能我们在开发环境大部分模块需要采用D ...
- C#6.0语言规范(十) 类
类是可以包含数据成员(常量和字段),函数成员(方法,属性,事件,索引器,运算符,实例构造函数,析构函数和静态构造函数)和嵌套类型的数据结构.类类型支持继承,这是一种派生类可以扩展和专门化基类的机制. ...
- java打包jar后，使之一直在linux上运行，不随终端退出而关闭
nohup java -jar xxx.jar&
- Delphi：程序自己删除自己，适用于任何windows版本(含源码)
Delphi:程序自己删除自己,适用于任何windows版本(含源码) function Suicide: Boolean; var sei: TSHELLEXECUTEINFO; szMod ...