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. JSP userBean setProperty getProperty指令使用
			
    JSP userBean setProperty getProperty指令使用 javaBean的属性取决于get/set方法,而不是真实的属性名称. jsp文件: <%@ page lang ...
    
			
    2. 
						
  2. SuperSocket入门（五）-常用协议实现模版及FixedSizeReceiveFilter示例
			
             Socket里面的协议解析是Socket通讯程序设计中最复杂的地方,如果你的应用层协议设计或实现不佳,Socket通讯中常见的粘包,分包就难以避免.SuperSocket内置了命令行 ...
    
			
    3. 
						
  3. 转载：MAT Memory Analyzer Tool使用示例
			
    地址:http://blog.csdn.net/yanghongchang_/article/details/7711911 以下是一个会导致java.lang.OutOfMemoryError: J ...
    
			
    4. 
						
  4. ECMAScript 6 笔记（三）
			
    ES6中的基本扩展 一.函数的扩展 1. 函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console ...
    
			
    5. 
						
  5. 虚拟机网络配置详解(NAT、桥接、Hostonly)
			
    VirtualBox中有四种网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实它跟VMWare的网络连接方式都是一 ...
    
			
    6. 
						
  6. SQL Server 安装报错找不到vc_red.msi
			
    问题描述: 今天给 WIN 7 SP1 操作系统安装 SQL Server 2014 ,报错找不到vc_red.msi   (图片来源网络,请忽略2012字样..)   问题解决: 1.由于安装程序提 ...
    
			
    7. 
						
  7. Eclipse运行时无法加载主类的解决方法
			
    测试代码: package javastudy; class Person { public static void main(String[] args) { PersonCeshi pp=new  ...
    
			
    8. 
						
  8. JS数组处理
			
    一.定义数组: 方法1 var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[ ...
    
			
    9. 
						
  9. 覆写hashCode equal方法
			
    1.为什么要重写hashCode方法? 当自己要新建一个class,并要把这个类放到HashMap的时候,需要覆写这两个办法.如果不覆写,放入两个新的对象,可能会是不相等的. 在java的集合中,判断 ...
    
			
    10. 
						
  10. Python package install血泪史
			
    [前言][絮絮叨叨篇]:说实话,不是第一次安装Python库了,但是貌似没有特别顺利的时候,可能还是遇到的困难不够多咯.配置环境真是个糟心的事儿,不过作为菜鸟,还是得磨练磨练,毕竟某人云:" ...
    
			
    11.