html 部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .bgc {
            background: #08a9f2;
        }
        tr,td {
            cursor: default;
        }
        .lh{
            background: red;
            color:#fff;
        }
    </style>
</head>
<body>

<table width=100% border="1px" cellspacing="0px">
    <thead>
    <th>名称</th>
    <th chartType=bar>温度（bar）</th>
    <th chartType=bar>高度（bar）</th>
    <th chartType=line>销量（line）</th>
    <th chartType=bar>进口（bar）</th>
    <th chartType=line>收入（line）</th>
    </thead>
    <tbody>
    <tr>
        <td>一月</td>
        <td>234</td>
        <td>345</td>
        <td>123</td>
        <td>234</td>
        <td>444</td>
    </tr>
    <tr>
        <td>二月</td>
        <td>123</td>
        <td>234</td>
        <td>345</td>
        <td>347</td>
        <td>285</td>
    </tr>
    <tr>
        <td>三月</td>
        <td>345</td>
        <td>654</td>
        <td>234</td>
        <td>654</td>
        <td>523</td>
    </tr>
    <tr>
        <td>四月</td>
        <td>864</td>
        <td>234</td>
        <td>647</td>
        <td>347</td>
        <td>237</td>
    </tr>
    <tr>
        <td>五月</td>
        <td>435</td>
        <td>737</td>
        <td>348</td>
        <td>964</td>
        <td>285</td>
    </tr>
    </tbody>
</table>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="width: 65%;height:400px;margin: 30px auto"></div>
<!--<div id="main2" style="width: 60%;height:400px;"></div>-->
</body>
</html>

js 部分

<!-- 引入Jq -->
<script src="lib/jQuery/jquery-3.1.1.min.js"></script>
<!-- 引入 echarts -->
<script src="echarts.min.js"></script>
<script>
　　 // 找到tbody下的tr并遍历
    $('tbody tr').each(function () {
　　　　　// 点击当前这个tr
        $(this).click(function () {
　　　　　　　// 当前这行高亮，并去掉同级其他兄弟元素的高亮　
            $(this).addClass('bgc').siblings().removeClass('bgc');
　　　　　　　// 当前这行的同级元素的子元素去除高亮（单元格的）　
            $(this).siblings().children().removeClass('lh');
　　　　　　　// 创建4个数组，动态添加到echart里面的　
            var data1 = [], title1 = [], chartType = [], namedata = [];
　　　　　　  // 获得td 和 th
            var td = $(this).find("td"), th = $('th');
　　　　　　　// 遍历th
            td.each(function (i) {
　　　　　　　　　// 第一个 0索引的不要  其他的添加上去　
                if (i != 0)
                    data1.push($(this).html());
                else
                    title1.push($(this).html());
            })
　　　　　　　// 同上　
            th.each(function (i) {
                if (i != 0)
                    namedata.push($(this).html());
                chartType.push($(this).attr("chartType"));
            })
　　　　　　　// 根据上面的参数动态获取图　
            var myChart = echarts.init(document.getElementById('main1'));
            var option = {
                xAxis: {
                    data: namedata,
//                    axisTick:false // X轴 向下的线
                },
                yAxis: {
                    name: '最高时期',
                },
                series: [
                    {
                        name: title1 + '柱状图',
                        type: 'bar',
                        barWidth: '30%', // 柱子宽度
                        itemStyle: {
                            normal: {color: '#08a9f2',} // 柱子颜色
                        },
                        data: data1,
                        markPoint : {
                            clickable:true,
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        }
                    },
                    {
                        name: title1 + '折线图',
                        type: 'line',
                        itemStyle: {
                            normal: {color: '#72b201'} // 折线颜色
                        },
                        data: data1
                    }
                ]
            }
            myChart.setOption(option);
            myChart.on('click', function (params) {
                // 点击到了 markPoint 上
                if (params.componentType === 'markPoint')
                     return false;
                // 通过索引高亮当前点击
                $(td).eq(namedata.indexOf(params.name) + 1 ).addClass('lh').siblings().removeClass('lh');
                // 通过查询高亮当前点击
                /*
                 *
                 *
                 *
                $(td).each(function(i){
                    if(params.data == $(this).text())
                        $(this).addClass('lh')
                    else
                        $(this).removeClass('lh')
                })
                *
                *
                *
                */
            });
        })
    })
</script>


												


											
表格和echart二级联动，并通过点击echart高亮图标单元格的更多相关文章
	

    
								
  1. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
		
    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等  ...
    
		
    2. 
						
  2. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
		
    目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
    
		
    3. 
						
  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：将悬停的颜色应用在行或者单元格上
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    4. 
						
  4. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
		
    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
    
		
    5. 
						
  5. Extjs二级联动combo省城市
		
    Extjs二级联动 Extjs combox根据省查询城市 实现效果如上图所示, store层代码: Ext.define("ExtApp.store.TeacherProvince&quo ...
    
		
    6. 
						
  6. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）
		
    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
    
		
    7. 
						
  7. asp.net 使用DroDownList来实现二级联动
		
    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
    
		
    8. 
						
  8. Select标签下拉列表二级联动级联
		
    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
    
		
    9. 
						
  9. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）
		
    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Quercus
			
    其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...
    
			
    2. 
						
  2. MVC伪一个12306图片验证码
			
    本文的来由主要是满足自己的好奇心,而不是证明什么东西,如果涉及到什么官方性的事情,麻烦通知我谢谢:本篇将要和大家分享的是一个看起来通12306图片验证码相似的效果,这篇应该是今年农历最后一篇分享文章了 ...
    
			
    3. 
						
  3. js运算符单竖杠“|”的作用
			
    在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. M ...
    
			
    4. 
						
  4. 第三章 Python 的容器： 列表、元组、字典与集合
			
    列表是Python的6种内建序列(列表,元组,字符串,Unicode字符串,buffer对象,xrange对象)之一, 列表内的值可以进行更改,操作灵活,在Python脚本中应用非常广泛 列表的语法格 ...
    
			
    5. 
						
  5. css3模拟jq点击事件
			
    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
    
			
    6. 
						
  6. Linux编程之ICMP洪水攻击
			
    我的上一篇文章<Linux编程之PING的实现>里使用ICMP协议实现了PING的程序,ICMP除了实现这么一个PING程序,还有哪些不为人知或者好玩的用途?这里我将介绍ICMP另一个很有 ...
    
			
    7. 
						
  7. 《Oracle 从头来过》--第一篇
			
    ps:最近被领导找谈话,让在数据库方面要加强自身的学习(那叫一个尴尬(@﹏@)~(@﹏@)~),打算重新拾起... 下面相当于学习的一个记录吧,也为以后查找方便O(∩_∩)O 咱们从最基本的创建表开始 ...
    
			
    8. 
						
  8. ASP.NET MVC5 实现分页查询
			
    对于大量数据的查询和展示使用分页是一种不错的选择,这篇文章简要介绍下自己实现分页查询的思路. 分页需要三个变量:数据总量.每页显示的数据条数.当前页码. //数据总量 int dataCount; / ...
    
			
    9. 
						
  9. SpringBoot实践 - SpringBoot+mysql
			
    关于springBoot是个神马东西以及优缺点,请自行搜索了解. LZ看到很多关于SpringBoot的Demo,单看一篇总是没法整合SpringBoot与Mysql.没法子,还是自己操刀来一发为妙. ...
    
			
    10. 
						
  10. NodeJS 框架一览
			
    Express 当你使用Node.js构建web应用程序时, Express通常被视为事实上的Web服务器.它的哲学(一个可以使用中间件包扩展的简约核心)是大多数Node.js开发者所熟悉的. Koa ...
    
			
    11.