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

最新推荐文章于 2024-04-14 15:38:03 发布

转载最新推荐文章于 2024-04-14 15:38:03 发布 · 5k 阅读

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

ECharts

26 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的表格与图表联动的示例，通过配置toolbox的各项功能，包括显示标记、数据视图、魔法类型切换等，实现了数据的直观展示。文章详细展示了如何设置表格样式及如何在不同类型的图表间进行切换。

原文出处：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>