说明：
折线堆叠图专业名词：
legend - 图例，用于展示有哪些项目的数量变化趋势将会被展现到折线堆叠图上。
series - 折线，用于展示legend项目的数量变化趋势。
一、需求
1.1 demo准备
根据echarts的原生折线堆叠图，前往：https://echarts.baidu.com/examples/editor.html?c=line-stack
下载html，去掉引入的api数据源并注释掉stack:‘总量’（不让数据累加，而是独立显示）所在行即可。通过浏览器打开如下：
1.2 问题所在
如果使用者想要观察单个图例（legend）对应的折线（series）的变化趋势，由于legend和series是属于联动选择的关系，那么此时需要在点击其他legend，使其选择状态为false，从而只留下想看的legend对应的series，如下图：
如图，如果我们只想观察“搜索引擎”的数量变化趋势，那么需要点击四次，才能反选其他legend，并擦除它们对应的series，只留下“搜索引擎”的折线图。
1.3 期望改进效果
增加一个“清除”按钮，当点击此按钮时，图上所有legend被反选，所有series消失；但是，在反选后，可以重新选择单个legend观察其对应的单条series，即反选功能既要做到数据清空，又要做到数据正确恢复。如下图：
第一步：点击清空，legend全部变暗，折线全部消失
第二步：可以点击legend，查看单条series
二、代码实现
2.1 上述demo反选实现代码
line-stack.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<button id="button" onclick="clear()">清空</button>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
selected: {
'邮件营销': true,
'联盟广告': true,
'视频广告': true,
'直接访问': true,
'搜索引擎': true
},
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
var btn = document.getElementById("button");
var isClear = false;
// 清空数据
btn.onclick = function(){
for(var key in option.legend.selected) {
option.legend.selected[key] = false;
}
isAllClear = true;
myChart.setOption(option, true);
};
</script>
</body>
</html>
2.2 将demo的方法应用至实战项目
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript" src="js/form-counters.js"></script>
</head>
<body>
<input type="datetime-local" id="startTime4Line"> to
<input type="datetime-local" id="endTime4Line">
<input type="button" id="button_fcLine" value="按起始时间查询"/>
<button id="clearFcLine">清空图例和折线</button>
<div id="fcLine" style="width: 1200px; height: 800px"></div>
<form id="form_fcPie">
<input type="datetime-local" id="time4Pie">
<input type="button" id="button_fcPie" value="按时间查询">
</form>
<div id="fcPie" style="width: 1200px; height: 800px"></div>
</body>
</html>
form-counter.js
var rootPath = "/bpm-manager"
var jsonArrData = [];
var isAllClear = false;
$(function () {
var fcLine = echarts.init(document.getElementById('fcLine'));
$.ajax({
method:'GET',
url: rootPath + "/form/counters/map/title-date-count",
success: function (data) {
handleFcLine(fcLine, data);
}
});
$('#button_fcLine').click(function () {
var startTime = $('#startTime4Line').val().replace('T', ' ');
var endTime = $('#endTime4Line').val().replace('T', ' ');
if(startTime.length === 0) {
alert('请输入起始日期');
return;
}
$.ajax({
method:'GET',
url: rootPath + "/form/counters/map/title-date-count?startTime=" + startTime +
"&endTime=" + endTime,
success: function (data) {
handleFcLine(fcLine, data);
}
});
});
$('#button_fcPie').click(function () {
var time = $('#time4Pie').val();
time = time.replace('T', ' ');
$.ajax({
method: "GET",
url: rootPath + "/form/counters/map/title-count?time=" + time,
success: function(data) {
var fcPie = echarts.init(document.getElementById('fcPie'));
var nameArr = [];
var jsonArr = [];
var i = 0;
$.each(data, function (name, count) {
nameArr[i] = name;
jsonArr[i] = {value: count, name: name};
i++;
});
var option = {
title: {
text: '每月表单比例统计',
subtext: time + '数据',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: nameArr
},
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: jsonArr,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
if (option && typeof option === "object") {
fcPie.setOption(option, true);
}
}
})
}
);
});
function handleFcLine(fcLine, data) {
var nameArr = [];
var dateArr = [];
var jsonArr = [];
var i = 0;
$.each(data, function (name, dateCountMap) {
var j = 0;
var countArr = [];
nameArr[i] = name;
$.each(dateCountMap, function (date, count) {
dateArr[j] = date;
countArr[j] = count;
j++;
});
jsonArr[i] = {
name: name,
type: 'line',
data: countArr
};
i++;
});
var option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
legend: {
selected: {
},
data: nameArr
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateArr
},
yAxis: {
type: 'value'
},
series: jsonArr
};
$.each(nameArr, function (name) {
option.legend.selected[name] = true;
});
if (option && typeof option === "object") {
fcLine.setOption(option, true);
}
$('#clearFcLine').click(function () {
nameArr.forEach(function (name) {
option.legend.selected[name] = false;
});
fcLine.setOption(option, true);
});
}
