echart 数据视图样式重写

程序员文章站 2022-03-28 13:41:39

来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写在echarts.js中，点击折线图的数据试图按钮，会以表格table的形式展示折线图中的数据，但是此时的table格式比较乱。如下图：所以 ......

来源http://blog.csdn.net/u010705091/article/details/75212724

echarts折线图的数据视图样式重写

在echarts.js中，点击折线图的数据试图按钮，会以表格table的形式展示折线图中的数据，但是此时的table格式比较乱。如下图： echart 数据视图样式重写

所以，为了展示美观需重写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;
       }

echart 数据视图样式重写至此，数据试图的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"></

上一篇：新奇外设：利用网线传递USB信号

下一篇：宋朝男子喜欢戴花？背后什么含义

echart 数据视图样式重写

echarts折线图的数据视图样式重写

dataTable()