来源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自有的。如下图:
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; }
至此,数据试图的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"