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

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

在echarts.js中,点击折线图的数据试图按钮,会以表格table的形式展示折线图中的数据,但是此时的table格式比较乱。如下图:
echarts折线图的数据视图样式重写_第1张图片

所以,为了展示美观需重写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 ='',
      var table = table + ''+ ''+ '' + '' + '';
       for (var i = 0, l = axisData.length; i < l; i++) {
           table += '' + '' + '' + ''+ '';
           }
             table += '';
             returntable;
       }

echarts折线图的数据视图样式重写_第2张图片
至此,数据试图的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

        };

整体代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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");
                                // 
时间' + series[0].name + '' + series[1].name + '
' + axisData[i] + '' + series[0].data[i] + '' + series[1].data[i] + '
var table = '' + '' + '' + '' + ''; for (var i = 0, l = axisData.length; i < l; i++) { table += '' + '' + '' + '' + ''; } table += ''; 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}
{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>

效果图如下:

echarts折线图的数据视图样式重写_第3张图片

之后就可以用dataTable里相应的配置来为table添加不同的功能。

你可能感兴趣的:(前端开发)

时间' + series[0].name + '' + series[1].name + '
' + axisData[i] + '' + series[0].data[i] + '' + series[1].data[i] + '