主要思路

1. 增加无数据的 series[i] ，产生额外的图例图标
2. 监听「legendselectchanged」事件，更新图表数据源，实现所需图形的显示 / 隐藏

具体实现

准备原始数据、准备过滤原始数据的函数 arrFilter()：

datasetSource = [
 ['product', '2015', '2016', '2017', '2018'],
 ['Matcha Latte', 43.3, 85.8, 93.7, 54.2],
 ['Milk Tea', 83.1, 73.4, 55.1, 65.3],
 ['Cheese Cocoa', 86.4, 65.2, 82.5, 87.1],
 ['Walnut Brownie', 72.4, 53.9, 39.1, 33.6]
];
function arrFilter(source, hasColumnName, filterCondition) {
 var iBegin = hasColumnName ? 1 : 0;
 var res = hasColumnName ? [source[0]] : [];
 if (typeof(filterCondition) === 'function') {
 for (let i = iBegin; i < source.length; i++) {
 if (filterCondition(source[i])) {
 res.push(source[i]);
 }
 }
 } else if (typeof(filterCondition) === 'string') {
 for (let i = iBegin; i < source.length; i++) {
 let item = source[i];
 if (eval(filterCondition)) {
 res.push(source[i]);
 }
 }
 }
 return res;
}

• source：源数据，ECharts dataset 使用的二维数组数据
• hasColumnName：二维数据是否有标题行
• filterCondition：过滤条件，可以传入结果为布尔值的字符串表达式，或者入参为 source[i] ，返回布尔值的函数

配置项（自定义图例及对应的 series[i]）

option = {
 legend: [{
 selectedMode: 'multipe',
 data: (function() {
 let res = [].concat(datasetSource[0]);
 res.shift();
 return res;
 })(),
 }, {
 y: 20,
 data: ['Matcha Latte/Milk Tea', 'Cheese Cocoa/Walnut Brownie']
 }],
 tooltip: {},
 
 // 使用 dataset 传入数据
 dataset: {
 source: datasetSource
 },
 xAxis: {
 type: 'category'
 },
 yAxis: {},
 // Declare several bar series, each will be mapped
 // to a column of dataset.source by default.
 series: (function() {
 let res = [];
 for (let i = 1; i < datasetSource[0].length; i++)) {
 res.push({
 type: 'bar'
 });
 }
 res = res.concat([{
 type: 'line',
 name: 'Matcha Latte/Milk Tea',
 data: []
 },
 {
 type: 'line',
 name: 'Cheese Cocoa/Walnut Brownie',
 data: []
 }
 ]);
 return res;
 })()
};

• (function(){ return xxx })()：这种写法会直接把函数的返回值计算出来并返回，不会得到一个函数对象
• 在图例和系列中，增加自定义的「Matcha Latte/Milk Tea」和「Cheese Cocoa/Walnut Brownie」

监听「legendselectchanged」事件

myChart.on('legendselectchanged', function(params) {
 var datasetSourceNew;
 //alert(JSON.stringify(params.selected));
 if (params.selected['Cheese Cocoa/Walnut Brownie'] === true && params.selected['Matcha Latte/Milk Tea'] === true) {
 datasetSourceNew = [].concat(datasetSource);
 } else if (params.selected['Matcha Latte/Milk Tea'] === false && params.selected['Cheese Cocoa/Walnut Brownie'] === false) {
 datasetSourceNew = [].concat([datasetSource[0]]);
 } else if (params.selected['Matcha Latte/Milk Tea'] === true && params.selected['Cheese Cocoa/Walnut Brownie'] === false) {
 datasetSourceNew = arrFilter(datasetSource, true, 'item[0] === "Matcha Latte" || item[0] === "Milk Tea"');
 } else if (params.selected['Cheese Cocoa/Walnut Brownie'] === true && params.selected['Matcha Latte/Milk Tea'] === false) {
 datasetSourceNew = arrFilter(datasetSource, true, 'item[0] === "Cheese Cocoa" || item[0] === "Walnut Brownie"');
 }
 myChart.setOption({
 dataset: {
 source: datasetSourceNew 
 }
 });
});

• 「Matcha Latte/Milk Tea」和「Cheese Cocoa/Walnut Brownie」都选中：使用原数据源
• 「Matcha Latte/Milk Tea」和「Cheese Cocoa/Walnut Brownie」都未选中：使用空数据源
• 「Matcha Latte/Milk Tea」和「Cheese Cocoa/Walnut Brownie」只有一个被选中：通过 arrFilter() 筛选原数据源
• 最后更新图表

点击「扩展链接」查看 ECharts Gallery 例子