自定义图例事件
自定义图例事件
ZXand618
发布于 2022-04-10 10:01:45
发布于 2022-04-10 10:01:45
主要思路
- 增加无数据的 series[i] ，产生额外的图例图标
- 监听「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() 筛选原数据源
- 最后更新图表
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-06-28，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 ZXand618的ECharts之旅 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读