自定义图例事件

主要思路

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

具体实现

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

代码语言：javascript复制

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]）

代码语言：javascript复制

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」事件

代码语言：javascript复制

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() 筛选原数据源
• 最后更新图表

cocoa

0 人点赞