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

妖狐艹你老母 2022-05-19 01:35 532阅读 0赞

原文出处：[https://blog.csdn.net/u012890715/article/details/78857086][https_blog.csdn.net_u012890715_article_details_78857086]

![20171220202929678][]![20171220202806327][]

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>

[https_blog.csdn.net_u012890715_article_details_78857086]: https://blog.csdn.net/u012890715/article/details/78857086
[20171220202929678]: https://img-blog.csdn.net/20171220202929678
[20171220202806327]: /images/20220519/3cd04275ecad4b4daa52c3b025224edc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，532人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts自定义样式

一、柱状图x、y轴：（1）实现隐藏x轴，y轴，刻度线，网格 yAxis: { show: true, type: 'value',

迷南。/ 2022年12月15日 03:39/ 0 赞/ 231 阅读

相关 echarts dataView数据对齐及表格复制

参考：[https://segmentfault.com/a/1190000019547857][https_segmentfault.com_a_11900000195478

我就是我/ 2022年09月12日 11:47/ 0 赞/ 182 阅读

相关向 echarts图标工具栏toolbox中加入自定义图标／图形

原文出处：[https://blog.csdn.net/singsingasong/article/details/77254687][https_blog.csdn.net_

谁践踏了优雅/ 2022年05月19日 01:36/ 0 赞/ 527 阅读

相关 echarts toolbox增加自定义图标

原文出处：[https://blog.csdn.net/zhenyushao/article/details/67636213][https_blog.csdn.net_zhe

淡淡的烟草味﹌/ 2022年05月19日 01:35/ 0 赞/ 375 阅读

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

原文出处：[https://blog.csdn.net/u012890715/article/details/78857086][https_blog.csdn.net_u01

妖狐艹你老母/ 2022年05月19日 01:35/ 0 赞/ 533 阅读

相关 datagrid属性表格自定义表格样式,表格内自定义标签

1.自定义表格样式 columns:[[ {field:'permission',title:'编辑权限',width:100,

￡神魔★判官ぃ/ 2022年05月17日 07:34/ 0 赞/ 207 阅读

相关 echarts，toolbox自定义方法，toolbox部分自定义方法

toolbox自定义方法， toolbox: { show: true,

蔚落/ 2022年03月21日 03:07/ 0 赞/ 557 阅读

相关如何自定义echarts 线性图的选择事件

最近在做公司的数据大盘，要用到图表显示，echarts研二的时候有用过，我就决定用它了。这里用到一个可以同时显示多条曲线的line-charts，基本样子如下： ![82

「爱情、让人受尽委屈。」/ 2022年01月10日 00:47/ 0 赞/ 273 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 738 阅读

相关 echart自定义主题

(function (root, factory) { if (typeof define === 'function' && define.amd)

不念不忘少年蓝@/ 2021年07月26日 15:25/ 0 赞/ 572 阅读