echart 数据视图样式重写

最新推荐文章于 2023-11-07 17:43:53 发布

weixin_30278237

最新推荐文章于 2023-11-07 17:43:53 发布

阅读量249

点赞数

原文链接：http://www.cnblogs.com/hao-1234-1234/p/8304911.html

版权

来源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"

转载于:https://www.cnblogs.com/hao-1234-1234/p/8304911.html

weixin_30278237

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echart 数据视图样式重写

来源http://blog.csdn.net/u010705091/article/details/75212724echarts折线图的数据视图样式重写在echarts.js中，点击折线图的数据试图按钮，会以表格table的形式展示折线图中的数据，但是此时的table格式比较乱。如下图：所以，为了展示美观需重写table的样式。echart.js的官方文档，是在配置项option中...
复制链接

扫一扫