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

echarts折线图的数据视图样式重写 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 + tbodytr+ 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=/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(