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. Pomelo聊天室框架
			
    聊天室是验证服务器最典型的例子,Pomelo的运行架构: 在这个架构里,前端服务器也就是connector专门负责承载连接, 后端的聊天服务器则是处理具体逻辑的地方. 这样扩展的运行架构具有如下优势: ...
    
			
    2. 
						
  2. 获取FMS的状态信息
			
    application.getStats() application.getStats() Returns statistics about an application. Returns An Ob ...
    
			
    3. 
						
  3. 基于Ubuntu 14.04构建mysql5.6 Docker镜像
			
    我们的目的是创建一个基于Ubuntu 14.04 的MySQL的 Docker Image,并且在新创建出来的容器里自动启动MySQL服务接受外部连接 步骤: 1. 首先创建一个目录并在目录下创建一个 ...
    
			
    4. 
						
  4. Cms 总结（转）
			
    提起开源cms,大家第一想到的是php的cms,因为php开源的最早,也最为用户和站长们认可,随着各大cms系统的功能的不断完善和各式各样的开源cms的出现,.net和java的高端的cms系统也逐渐 ...
    
			
    5. 
						
  5. KB奇遇记(7)：不靠谱的项目实施计划
			
    在ERP项目启动前期,项目组两方项目经理和我等几个人单独跟总裁开会,讨论了初步的ERP实施计划,本来第一期上线只是考虑上其中一家工厂而已,结果临时加入了深加工的工厂.本来项目组预定计划是2017年1月 ...
    
			
    6. 
						
  6. ML2 配置 OVS VxLAN - 每天5分钟玩转 OpenStack（146）
			
    今天我们开始学习 OVS 如何实现 Neutron VxLAN,关于 VxLAN 的概念以及 Linux Bridge 实现,大家可以参考前面相关章节. Open vSwitch 支持 VXLAN 和 ...
    
			
    7. 
						
  7. Kafka 0.10 SocketServer源代码分析
			
    1概要设计 Kafka SocketServer是基于Java NIO来开发的,采用了Reactor的模式,其中包含了1个Acceptor负责接受客户端请求,N个Processor负责读写数据,M个H ...
    
			
    8. 
						
  8. (4)activiti之uel表达式
			
    有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购单,如何跟一个流程实例互相关联起来? 这里就需要使用到activiti启动流程实例时设置一个流程实例的busines ...
    
			
    9. 
						
  9. Baidu图表插件--Eharts使用（柱状图）
			
    官网链接:http://echarts.baidu.com/index.html 官网的demo,api都很详细:我就分享下我的学习步骤 首先定义一个显示图标的区域: <div id=" ...
    
			
    10. 
						
  10. hadoop--安装1.2.1版本
			
    hadoop的安装分为三种方式,第一种单机安装,一般用于调试(其实一般都不用).第二种,伪分布式安装,一般程序员开发会使用这种方式.第三种,分布式安装,在实际环境中应用.今天在这里记下的是第二种,即伪 ...
    
			
    11.