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

       }

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

dataTable()

最新文章

热门文章

巴特西

echart 数据视图 样式重写

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

dataTable()

最新文章

热门文章

echart 数据视图样式重写