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>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
