Echarts在线免费图表

 
            var categories = ['a', 'b', 'c', 'd', 'e'];
var data = [6, 117, 225, 139, 333];
option = {
    legend: {
        // 在bar图表中似乎legend 不显示 ?
        data: ['a', 'b', 'c', 'd', 'e']
    },
    xAxis: {
        data: categories
    },
    yAxis: {},
    series: [{
        type: 'bar',
        name: 'main',
        data: data
    }, {
        // legend 的名字必须要要跟系列名字对应
        // 空系列占位
        type: 'scatter',
        name: 'a'
    }, {
        type: 'scatter',
        name: 'b'
    }, {
        type: 'scatter',
        name: 'c'
    }, {
        type: 'scatter',
        name: 'd'
    }, {
        type: 'scatter',
        name: 'd'
    }, {
        type: 'scatter',
        name: 'e'
    }]
};

setTimeout(function () {
    // 监听图例变化事件
    myChart.on('legendselectchanged', function (e) {
        var filteredData = data.map(function (val, idx) {
            if (e.selected[categories[idx]]) {
                return val;
            }
            else {
                // 没被选中的返回空数据
                return  '-';
            }
        });
        myChart.setOption({
            series: {
                name: 'main',
                // 更新数据
                data: filteredData
            }
        }) 
    })
})