本人研究echarts已经有一段时间了，今天就分享几个关于echarts的小技巧。虽然看起来简单，但做起来却很繁琐，不过实用性倒是很好。
在一个大的页面中，左边为table表格，右边为echarts的散点图。
需求一，实现echarts中所有的散点取自table中的数据。
需求二：两个交互，交互1，点击左边的table中数据时，先实现table重新隔行变色，然后左边被点击的数据背景颜色变黄，右边的散点图点亮。通过table控制散点图。
交互2：当点击散点图中任意数据时，获取此数据来自于左边散点图的位置，并控制页面滚动到指定位置（本例数据较少，这个方法的作用感觉不明显，但当有大量数据时，这个方法会很有用），先对table进行重新隔行变色，然后左边的table会先重构，接着右边被点击的散点图点亮。通过散点图来控制table表格。
需求三：自定义echarts提示内容。
下图是我做的小demo的简单样式图（不要觉得简单，其实可以在这个基础上增加许多的东西）。
首先我们先引入echarts
<script type="text/javascript" src="js/echarts.js" ></script>
我们先来实现第一个需求。思路：我们通过遍历将table中的数据全部获取，并存入一个数组中，再在series中使用这个数组。
篇幅有限，先在这里放核心代码（文章结尾我会全部的代码）：
function gainData() {//将table中的数据赋给information ???????????????var td = info.getElementsByTagName("td"); ???????????????for(var i = 0;i<td.length - 1;i++,i++){ ???????????????????var x = td[i].innerText*1; // x轴 ???????????????????var y = td[i+1].innerText*1;// y轴 ???????????????????information.push([// 获取所有散点数据 ???????????????????????x, ???????????????????????y ???????????????????]); ???????????????} ???????????} series: [{ ????name: ‘销量‘, ????type: ‘scatter‘, ????data: information, },扩展：当table的数据是动态改变时，其实这里可以给table加上MutationObserver方法，在不刷新页面的情况可以确保散点图与它完全一致，我们这里考虑的是table数据是不改变情况。
实现两个交互：当点击左边table时，先重新加载一次隔行变色（将原先的点击记录清除掉），然后再将被点击的行变色，获取被点击的数据，将此数据存入chose数组中，重新加载echarts散点图（被点亮的值为chose中的值）。
核心代码：
???function trclick() {//点击table事件，下方的顺序不要错，还有一定要使用this方法 ???????????????for (var i = 1; i < tr.length; i++) { ???????????????????tr[i].onclick = function clicktr() { ???????????????????????interleavecolor(); ???????????????????????//重新加载一次隔行变色 ???????????????????????this.style.background = "#FFFF00"; ???????????????????????//被点击的变为黄色 ???????????????????????var td = this.getElementsByTagName("td"); ???????????????????????chosex ?= td[0].innerText*1;//获取点击的数据 ???????????????????????chosey ?= td[1].innerText*1; ???????????????????????operationEcharts(); ???//重新运行Echarts ???????????????????????????} ???????????????} ???????????????} name: ‘CHOSE‘, ???type: ‘effectScatter‘, ???coordinateSystem: ‘cartesian2d‘, ???data: choseData(),//重新加载echarts时获取chose数组中需要标亮的x、y轴的值，新的数据会标亮 ???//标亮数据存入chose中 ??????????????function choseData(){ ??????????????????var chose = []; ??????????????????if(null==chosex||null==chosey){ ??????????????????????chosex = 1;//这是一开始默认的标亮数据 ??????????????????????chosey = 100; ??????????????????} ??????????????????chose.push([chosex,chosey]);//将获取的值存入chose数组中 ??????????????????return chose; ??????????????}交互2：交互2与交互1有两点不同，1，多了一个滚动事件，控制页面滚动到我们可以看到的table指定位置，2，标亮数据来源不同，交互二中点击echarts时，将点击的数据存入chose数组中。
点击echarts的代码：
????//如果点击echarts图 ?????????????myChart.on(‘click‘, function (params) { ???????????????if(params.componentType == ‘series‘) { ???????????????????for (var k = 1; k < tr.length; k++) { ???????????????????????????var tablex = String(tr[k].children[0].innerHTML); // 表格中的x轴 ???????????????????????var tabley = String(tr[k].children[1].innerHTML); // 表格中的y轴 ???????????????????????var chartx = String(params.data[0]);// 散点中的x轴 ???????????????????????var charty = String(params.data[1]);// 散点中的y轴 ???????????????????????if(tablex == ?chartx && tabley == charty) { ???????????????????????????interleavecolor(); ???????????????????????????// 控制页面滚动到指定位置 ???????????????????????????tr[k].scrollIntoView(); ???????????????????????????tr[k].style.background = "#FFFF00";// ???????????????????????????对应行变为黄色 ???????????????????????????chosex ?= params.data[0]; ???????????????????????????chosey ?= params.data[1]; ???????????????????????????operationEcharts();//重新加载echarts视图 ???????????????????????????trclick(); ???????????????????????????????break; ???????????????????????} ???????????????????} ????????????????} ???????????????????????????});需求三：一般情况下，当我们鼠标移动到数据上时，echarts的原生方法的数据是没有名称，也没有单位的，会给我们造成许多的不便，我们想看到单位和名称就要对formatter的方法进行重写。我们先来看看重新前后的区别。
你会发现重写formatter方法前，数据显示2和300（你会发现根本不知道显示了什么），而重写之后我增加了日期和产量等名称。是不是高大上了一些。而这个2，300是什么数据呢。我们可以通过console.log（）这个方法打印出来所有的内容，我们对内容进行拼接，就可以展示任何自己想展示的内容。看下图。
tooltip: { ???????????????????????????????padding: 10, ???????????????????????????????backgroundColor: ‘#222‘, ???????????????????????????????borderColor: ‘#777‘, ???????????????????????????????borderWidth: 1, ???????????????????????????????formatter: function (param) {// ???????????????????????????????????return ‘<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">‘// ???????????????????????????????????????+ ‘table与ECharts交互模式‘ ???????????????????????????????????// ???????????????????????????????????????+ ‘</div>‘// ???????????????????????????????????????+ ‘日期：‘ + param.data[0]// ???????????????????????????????????????+ "<div></div>"// ???????????????????????????????????????+ ‘产量：‘ + param.data[1]; ????????????????????????????????????console.log(param); ???????????????????????????????} ???????????????????}完整的代码如下：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<script type="text/javascript" src="js/echarts.js" ></script> ???????<title></title> ???</head> ???<body> ???????<div id="information"style="width: 400px;float: left;"> ???????????<table border="1"> ???????????????<thead> ???????????????????<tr> ???????????????????????<th>日期</th> ???????????????????????<th>产量</th> ???????????????????</tr> ???????????????</thead> ???????????????<tbody> ???????????????????<tr> ???????????????????????<td>1</td> ???????????????????????<td>100</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>2</td> ???????????????????????<td>300</td> ???????????????????</tr> ???????????????????????????????????????<tr> ???????????????????????<td>3</td> ???????????????????????<td>700</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>4</td> ???????????????????????<td>800</td> ???????????????????</tr> ???????????????????????????????????????<tr> ???????????????????????<td>5</td> ???????????????????????<td>700</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>6</td> ???????????????????????<td>200</td> ???????????????????</tr> ???????????????</tbody> ???????????????</table> ???????</div> ???????<div id="main"style="width: 600px;height:400px;float: left;"> ???????????cccc ???????</div> ???????<script type="text/javascript"> ???????????var information = []; ???????// 数据的源头，取自于表格 ???????????var info = document.getElementById("information"); ???????????var table = info.getElementsByTagName("table"); ???????????var tr = table[0].getElementsByTagName("tr"); ???????????var myChart = echarts.init(document.getElementById(‘main‘)); ???????????var chosex,chosey;//被选择的x、y ???????????//初始化echarts实例 ?information ???????????gainData();//获取数据源 ???????????operationEcharts();//运行echarts ???????????trclick();//点击table的数据时右边进行标亮 ???????????interleavecolor();//隔行变色 ???????????function gainData() {//将table中的数据赋给information ???????????????var td = info.getElementsByTagName("td"); ???????????????for(var i = 0;i<td.length - 1;i++,i++){ ???????????????????var x = td[i].innerText*1; // x轴 ???????????????????var y = td[i+1].innerText*1;// y轴 ???????????????????information.push([// 获取所有散点数据 ???????????????????????x, ???????????????????????y ???????????????????]); ???????????????} ???????????} ??????????//画echarts ??????????????function operationEcharts(){ ???????????????var option = { ???????????????????title: { ???????????????????????text: ‘table与ECharts交互模式‘ ???????????????????}, ???????????????????tooltip: { ???????????????????????????????padding: 10, ???????????????????????????????backgroundColor: ‘#222‘, ???????????????????????????????borderColor: ‘#777‘, ???????????????????????????????borderWidth: 1, ???????????????????????????????formatter: function (param) {// ???????????????????????????????????return ‘<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">‘// ???????????????????????????????????????+ ‘table与ECharts交互模式‘ ???????????????????????????????????// ???????????????????????????????????????+ ‘</div>‘// ???????????????????????????????????????+ ‘日期：‘ + param.data[0]// ???????????????????????????????????????+ "<div></div>"// ???????????????????????????????????????+ ‘产量：‘ + param.data[1]; ????????????????????????????????????console.log(param); ???????????????????????????????} ???????????????????}, ???????????????????legend: { ??????????????????????????????????????????}, ???????????????????xAxis: { ???????????????????????splitLine: {show: false}, ???????????????????????axisLine: { ???????????????????????????lineStyle : { ???????????????????????????????color: { ???????????????????????????????????type: ‘linear‘, ???????????????????????????????????x: 0, ???????????????????????????????????y: 0, ???????????????????????????????????x2: 0, ???????????????????????????????????y2: 1, ???????????????????????????????????colorStops: [{ ???????????????????????????????????????offset: 0, color: ‘red‘ // 0% 处的颜色 ???????????????????????????????????}, { ???????????????????????????????????????offset: 1, color: ‘blue‘ // 100% 处的颜色 ???????????????????????????????????}], ???????????????????????????????????globalCoord: false // 缺省为 false ???????????????????????????????}, ???????????????????????????????????width: 2, ???????????????????????????} ???????????????????????}, ???????????????????}, ???????????????????yAxis: { ???????????????????????splitLine: {show: true}, ???????????????????}, ???????????????????series: [{ ???????????????????????name: ‘销量‘, ???????????????????????type: ‘scatter‘, ???????????????????????data: information, ???????????????????}, ???????????????????{ ???????????????????????????name: ‘CHOSE‘, ???????????????????????????type: ‘effectScatter‘, ???????????????????????????coordinateSystem: ‘cartesian2d‘, ???????????????????????????data: choseData(), ???????????????????????????symbolSize: 12, ???????????????????????????showEffectOn: ‘render‘, ???????????????????????????rippleEffect: { ???????????????????????????????brushType: ‘stroke‘ ???????????????????????????}, ???????????????????????????hoverAnimation: true, ???????????????????????????itemStyle: { ???????????????????????????????normal: { ???????????????????????????????????shadowBlur: 10, ???????????????????????????????????shadowColor: ‘rgba(25, 100, 150, 0.5)‘, ???????????????????????????????????shadowOffsetY: 5, ???????????????????????????????????color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ ???????????????????????????????????????offset: 0, ???????????????????????????????????????color: ‘#FF4500‘ ???????????????????????????????????}, { ???????????????????????????????????????offset: 1, ???????????????????????????????????????color: ‘#FFFF00‘ ???????????????????????????????????}]) ???????????????????????????????} ???????????????????????????}, ???????????????????????????zlevel: 1, ???????????????????????????label: { ???????????????????????????????emphasis: { ???????????????????????????????????show: true, ???????????????????????????????????formatter: function (param) { ???????????????????????????????????????return param.data[2]; ???????????????????????????????????}, ???????????????????????????????????position: ‘top‘, ???????????????????????????????????????textStyle: { ???????????????????????????????????????color : ‘#FF4500‘ ???????????????????????????????????} ???????????????????????????????????????????????????????????????} ???????????????????????????} ???????????????????????} ???????????????????] ??????????????}; ???????????????myChart.setOption(option); ??????????????} ??????????????//标亮数据 ??????????????function choseData(){ ??????????????????var chose = []; ??????????????????if(null==chosex||null==chosey){ ??????????????????????chosex = 1; ??????????????????????chosey = 100; ??????????????????} ??????????????????chose.push([chosex,chosey]); ??????????????????return chose; ??????????????} ??????????????function trclick() { ???????????????for (var i = 1; i < tr.length; i++) { ???????????????????tr[i].onclick = function clicktr() { ???????????????????????interleavecolor(); ???????????????????????//重新加载一次隔行变色 ???????????????????????this.style.background = "#FFFF00"; ???????????????????????//被点击的变为黄色 ???????????????????????var td = this.getElementsByTagName("td"); ???????????????????????chosex ?= td[0].innerText*1; ???????????????????????chosey ?= td[1].innerText*1; ???????????????????????operationEcharts(); ???//重新运行Echarts ???????????????????????????} ???????????????} ???????????????} ??????????????//隔行变色 ??????????????function interleavecolor(){ ??????????????????for (j = 1; j < tr.length; j++) { ??????????????????????if(0 != j%2){ ??????????????????????????tr[j].style.background = "#F0FFF0"; ??????????????????????}else{ ??????????????????????????tr[j].style.background = "#FFFAFA"; ??????????????????????} ???????????????} ??????????????} ??????????????//如果点击echarts图 ?????????????myChart.on(‘click‘, function (params) { ???????????????if(params.componentType == ‘series‘) { ???????????????????for (var k = 1; k < tr.length; k++) { ???????????????????????????var tablex = String(tr[k].children[0].innerHTML); // 表格中的x轴 ???????????????????????var tabley = String(tr[k].children[1].innerHTML); // 表格中的y轴 ???????????????????????var chartx = String(params.data[0]);// 散点中的x轴 ???????????????????????var charty = String(params.data[1]);// 散点中的y轴 ???????????????????????if(tablex == ?chartx && tabley == charty) { ???????????????????????????interleavecolor(); ???????????????????????????// 控制页面滚动到指定位置 ???????????????????????????tr[k].scrollIntoView(); ???????????????????????????tr[k].style.background = "#FFFF00";// ???????????????????????????对应行变为黄色 ???????????????????????????chosex ?= params.data[0]; ???????????????????????????chosey ?= params.data[1]; ???????????????????????????operationEcharts();//重新加载echarts视图 ???????????????????????????trclick(); ???????????????????????????????break; ???????????????????????} ???????????????????} ????????????????} ???????????????????????????}); ???????????</script> ???</body></html>如果你觉得写的不错请点赞，欢迎与我交流学习，谢谢！
转载请表明原出处：http://www.cnblogs.com/liebagefly/p/7961734.html 谢谢！
用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容
原文地址：http://www.cnblogs.com/liebagefly/p/7961734.html