表格和Echarts图表联动-通过选取表格数据组成图表

近日做了 个项目功能，就是通过表格列或者行选取表格数据来生成图表，不多说，上图

（这是最终效果，因为只是测试功能，所以就不美观啦）

大家可以在这个基础上进行修改，可以改成更好的

css部分：：：

	<style type="text/css">
		.echarts_div {
			width: 900px;
			height: 400px;
			border: 1px solid #ccc;
			margin: 0 auto;
		}
		
		.table {
			border: 1px solid #ccc;
 			margin: 0 auto;
			margin-top: 10px;
		}
		.tables{
			width: 900px;
			margin: 0 auto;
			height: auto;
			margin-top: 20px;
		}
		.table1{
			width: 900px; margin:0px; padding:0px;
		}
		.table1 th{
			border:1px #ddd solid;
		}
		.table1 td{
			border:1px #ddd solid; text-align:center;
		}
</style>

html部分：：：

<div id="box_echarts" class="echarts_div"></div>
		<div class="tables">
		<table id="table_ec" class="table1 table">
			<thead>
				<tr>
					<th>指标</th>
                    <th></th>
					<th>2013</th>
					<th>2014</th>
					<th>2015</th>
					<th>2016</th>
				</tr>
				<tbody id="table_tbody">
				<tr>
					<th> </th>
					<th> </th>
					<th><input class="input_col"  type="checkbox" /></th>
                    <th><input class="input_col"  type="checkbox" /></th>
					<th><input class="input_col"  type="checkbox" /></th>
					<th><input class="input_col" type="checkbox" /></th>
				</tr>

				<tr>
					<td>标题1</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>310</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题2</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>311</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题3</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>312</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题4</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>313</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题5</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>314</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题6</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>315</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题7</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>316</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				<tr>
					<td>标题8</td>
					<td><input type="checkbox" class="input_row" checked/></td>
					<td>317</td>
					<td>324</td>
					<td>435</td>
					<td>422</td>
				</tr>
				</tbody>
		</table>
		</div>
		

js部分（引jq库和echarts图表库我就不贴了）
这段代码是用来获取表格内的数据

var TableData_ColName = [];
var TableData_RowName = [];
var TableData_All = [];
var TableData_AllIndex = 0;
 
$("input[type='checkbox']").on("click",function(){
	GetData();			   
});
$(".input_col").eq(0).click()
	GetData();	
function GetData(){
	TableData_ColName = [];
	TableData_RowName = [];
	
	TableData_All = [];
	TableData_AllIndex = 0;
	
	//获取年
	$(".input_col").each(function(index, item) {
		if( $(item).is(":checked") ){
			var col_val = $("#table_ec").find("tr").eq(0).find("th").eq(index+2).html();
			 
			TableData_ColName.push( col_val );
		}
	});
	console.log(TableData_ColName);
	//获取name
	$(".input_row").each(function(index, item) {
		if( $(item).is(":checked") ){
			var row_val = $("#table_ec").find("tr").eq(index+2).find("td").eq(0).html();
			TableData_RowName.push( row_val );
		}
	});
	console.log(TableData_RowName);
 
	$(".input_row").each(function(index, item) {
		var rowIndex = index;
		
		if( $(item).is(":checked") ){
			
			TableData_All[ TableData_AllIndex ] = new Array(); 
			
			$(".input_col").each(function(index, item) {
				if( $(item).is(":checked") ){								  
					var colIndex = index;
					var col_th = $("#table_ec").find("tr").eq(0).find("th").eq(index+2).html();
					var col_val = $("#table_ec").find("tr").eq(rowIndex+2).find("td").eq(colIndex+2).html();
					//console.log("col_th:"+col_th+",col_val:" + col_val)	
					TableData_All[TableData_AllIndex].push( col_val );
				}
			});
			 
			TableData_AllIndex++;
		}
		
		
	});
	 
	echarts_table(TableData_ColName,TableData_RowName,TableData_All)

图表代码 ，此处我就把处理数据那块贴上

这些数据都写到对应的位置 图上没有贴图表数据入口，大家自己别忘记了。

如果有更好的思路修改这个代码，或者想要这个demo，私信我，别忘记关注哦
免费下载
新浪微博： https://weibo.com/yangsl520