最近又用起了百度echarts，好久没用了，特别推荐之前写的文章: Echarts柱状图详解
在使用折线图时，当折线很多且密集时，去查看节点数据，很难分清是哪一个类别的数据，如下图：
这时就需要找一种方式区别出来，当点击节点时，区域进行高亮(我给了大红色)，折线加粗，鼠标移开节点，恢复正常，提示内容为当前折线名称，如下图：
动态效果如下：
实现过程：
点击节点时，暂存当前折线区域颜色， 改变区域背景颜色及折线样式，当鼠标离开节点时，还原区域背景色及折线样式。
因为还原折线点击后区域的样式使用的是鼠标移开事件，这个事件如果不加以判断，每当鼠标聚焦到节点然后离开时，都会触发该事件，所以要加一个标志，只有当点击事件后，才可以成功触发鼠标移开事件，见下面代码。
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
var dataJson = {
IsClickFlg: false,
}
$(document).ready(function () {
EchartInit();
});
function EchartInit() {
var dom = document.getElementById("div_echart");
var mychart = echarts.init(dom);
var app = {};
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['电话销售', '纸质传媒', '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '电话销售',
type: 'line',
stack: '总量',
areaStyle: {},
data: [10, 22, 11, 24, 10, 23, 21]
},
{
name: '纸质传媒',
type: 'line',
stack: '总量',
areaStyle: {},
data: [12, 13, 10, 13, 90, 23, 21]
},
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {},
data: [220, 332, 401, 234, 590, 630, 320]
}
]
};
if (option && typeof option === "object") {
mychart.setOption(option, true);
}
var color = "";
mychart.on('click', function (params) {
//触发了点击事件
dataJson.IsClickFlg = true;
//记录区域高亮前的颜色
color = params.color;
mychart.setOption({
tooltip: {
trigger: 'item',
},
series: {
name: params.seriesName,
symbolSize: 5,
lineStyle: {
width: 5
},
areaStyle: {
color: 'red'
},
tooltip: {
textStyle: {
color: 'white',
fontSize: 14
}
}
},
});
});
mychart.on('mouseout', function (params) {
//加上判断是否点击过的标志作用，避免鼠标监控事件一直触发，导致区域颜色会改变，可以去掉这句代码试下
if (dataJson.IsClickFlg) {
mychart.setOption({
tooltip: {
trigger: 'axis',
},
series: {
name: params.seriesName,
symbolSize: 2,
lineStyle: {
width: 2
},
areaStyle: {
color: color
},
}
});
//区域颜色还原，点击标志还原
dataJson.IsClickFlg = false;
}
});
}
</script>
</head>
<body>
<div id="div_echart" style="width: 1000px; height: 500px; margin: 0 auto">
</div>
</body>
</html>
可能有人觉得点击节点太费事，手抖点不准节点咋办啊，没事… 我们可以将点击事件改为鼠标聚焦事件mouseover，这样只要你的鼠标慢慢移动到节点即可触发高亮效果。但是这种方式最好用于折线很少且松散时，当折线很多且密集时，你的鼠标在图上乱抖时，画面可想而知…如下图，我的电脑当时直接卡死…
最后推荐我自己写的几篇Echarts文章：Echarts专栏
| 欢迎 关注 |
 |
CSDN | Github |
| 博客园 | 个人网站 | ||
| 此博客内容是本人在平时工作、学习中，写下这些小总结，其中内容多为初次接触，不能保证完全正确、最优，如有疑问或不足之处，望评论指出。谢谢！ | |||