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. HTML URL
			
    HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址 ...
    
			
    2. 
						
  2. 第一部分 代码组织概念，集成开发环境(IDE)
			
    代码组织概念 主要是代码文件,项目和解决方案. 解决方案(.sln)包含多个项目(.csproj),一个项目又包含多个文件(.cs). 集成开发环境(IDE): 由编辑.编译.调试,以及用户图形界面, ...
    
			
    3. 
						
  3. 使用AngularJS的三个重要原因
			
    入门教程:http://www.ituring.com.cn/minibook/303 : http://angularjs.cn/tag/AngularJS 原因一:Google开发的框架 要知道开 ...
    
			
    4. 
						
  4. lufylegend库 LBitmapData LBitmap LSprite
			
    lufylegend库 LBitmapData LBitmap LSprite <!DOCTYPE html> <html lang="en"> <h ...
    
			
    5. 
						
  5. 【开发必备】今天我们来谈谈Android NDK动态链接库（so文件）的一些见解
			
    一.写在前面 直到现在,基本我写的每一个项目都会用到NDK动态链接库的知识,可见这个也的确十分常用.那么,今天,咱们就来谈谈它. 二.什么是ABI和so 1.发展 早起的Android系统几乎只支持A ...
    
			
    6. 
						
  6. 如何做到Zero Downtime重启Go服务?
			
    graceful的实践 使用endless库来实现,比如接入gin: r := gin.Default() r.GET("/", index) endless.ListenAndS ...
    
			
    7. 
						
  7. HDU5726(RMQ&&二分)
			
    GCD Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status D ...
    
			
    8. 
						
  8. Qt入门之基础篇 ( 二 ) ：Qt项目建立、编译、运行和发布过程解析
			
    转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...
    
			
    9. 
						
  9. CF448C [Painting Fence]递归分治
			
    题目链接:http://codeforces.com/problemset/problem/448/C 题目大意:用宽度为1的刷子刷墙,墙是一长条一长条并在一起的.梳子可以一横或一竖一刷到底.求刷完整 ...
    
			
    10. 
						
  10. iOS RunTime你知道了总得用一下
			
    说点题外话: 我刚来现在这家公司的时候,老板让我下载一个脉脉,上去找找自己的同行,多认识些同行.其实初衷的好的,但最近这两天我把它卸载了,不为别的,负能量太多!iOS这行自从2016就没景气过,在这行 ...
    
			
    11.