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. 安装python2.7.13-64bit & Pycharm在两个python版本之间切换
			
    本来已经安装了32位的python27,但在使用轮廓系数评估k-means模型的优良性时,出现了内存溢出的报错.原来32为的python编译器最多只能使用4GB的内存,所以就打算换成64位的pytho ...
    
			
    2. 
						
  2. Activity生命周期完全解析
			
    **转载请注明出处:http://www.cnblogs.com/landptf/p/6309108.html** 生命周期是个老生常谈的问题了,今天做个汇总,全当是记个笔记,以后查找起来方便一些.下 ...
    
			
    3. 
						
  3. BZOJ2002(分块)
			
    Bounce 弹飞绵羊 Time Limit:10000MS     Memory Limit:265216KB     64bit IO Format:%lld & %llu Submit  ...
    
			
    4. 
						
  4. Excel实用知识3
			
    纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6343914.html ,谢谢 数据透视表 数据透视表是 ...
    
			
    5. 
						
  5. 深入浅出 Java Concurrency 锁机制 : AQS
			
    转载:http://www.blogjava.net/xylz/archive/2010/07/06/325390.html 在理解J.U.C原理以及锁机制之前,我们来介绍J.U.C框架最核心也是最复 ...
    
			
    6. 
						
  6. OpenCV 3.2正式发布啦
			
    2016年12月23号OpenCV社区宣布了OpenCV3.2版本正式发布,这个是在OpenCV3.1版本发布一年以后再次升级.在3.2版本中有总数超过数千个的改进与修正,是OpenCV3.x系列中最 ...
    
			
    7. 
						
  7. ubuntu 14.04 中找不到 libgtk-x11-2.0.so
			
    如果ubuntu安装的64位的,在其中安装32位软件时就会碰到缺失libgtk-x11-2.0.so的情况 比如用wine安装qq时 启动qq时就会报这样的错误 error : cannot open ...
    
			
    8. 
						
  8. ArcGIS制图表达Representation实战篇4-自由式制图表达
			
    ArcGIS制图表达Representation实战篇4-自由式制图表达 by 李远祥 上一章节关于制图表达的控制点中已经介绍过制图表达的编辑功能,利用制图表达的编辑功能,可以实现一些规则以外的效果. ...
    
			
    9. 
						
  9. asp.net core mvc权限控制：在视图中控制操作权限
			
    在asp.net core mvc中提供了权限验证框架,前面的文章中已经介绍了如何进行权限控制配置,权限配置好后,权限验证逻辑自动就会执行,但是在某些情况下,我们可能需要在代码里或者视图中通过手工方式 ...
    
			
    10. 
						
  10. Linux驱动技术(七) _内核定时器与延迟工作
			
    内核定时器 软件上的定时器最终要依靠硬件时钟来实现,简单的说,内核会在时钟中断发生后检测各个注册到内核的定时器是否到期,如果到期,就回调相应的注册函数,将其作为中断底半部来执行.实际上,时钟中断处理程 ...
    
			
    11.