自定义echarts的toolbox事件(dataView表格）

最新推荐文章于 2024-06-06 13:20:02 发布

chelen_jak

最新推荐文章于 2024-06-06 13:20:02 发布

阅读量5k

点赞数

分类专栏： ECharts 实用

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

ECharts

26 篇文章

订阅专栏

原文出处：https://blog.youkuaiyun.com/u012890715/article/details/78857086

toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {
                    	show: true, readOnly: true,
                    	optionToContent : function(opt) {
                    		var table = $("#tableDiv").html();
                    		return table;
                    	}
                    },
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            }

<div id="tableDiv">
	    	<div id="lineDiv" style='position:absolute;z-index:9999;'></div>
		    <table cellspacing="0" cellpadding="0" style="border-collapse:collapse; width: 100%;margin-top: 20px;">
		      	<tr style="background-color: gainsboro;">
		          <th id="lineTd" style="border:#000000 solid 1px;width:10%;height:76px;" 
		          	points="[110,79,222,42,222,79]">                                 类型<br>
		          			         <br>                          级别<br>     年份</th>
		          <th style="text-align:center;border:#000000 solid 1px;height:45px;font-size: 18px;" colspan="4">咨询类</th>        
		          <th style="text-align:center;border:#000000 solid 1px;height:45px;font-size: 18px;" colspan="4">运维类</th>        
		          <th style="text-align:center;border:#000000 solid 1px;height:45px;font-size: 18px;" colspan="4">开发类</th>        
		          <th style="text-align:center;border:#000000 solid 1px;height:45px;font-size: 18px;">合计</th>        
		        </tr>
		        <tr>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">--</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">A</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">B</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">C</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">小计</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">A</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">B</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">C</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">小计</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">A</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">B</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">C</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">小计</th>
		            <th style="text-align:center;border:#000000 solid 1px;width:89px;height:32px;">--</th>
		        </tr>
		    </table>
	    </div>