最近又用起了百度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 |
| 博客園 | 個人網站 | ||
| 此博客內容是本人在平時工作、學習中，寫下這些小總結，其中內容多爲初次接觸，不能保證完全正確、最優，如有疑問或不足之處，望評論指出。謝謝！ | |||