Echarts在线免费图表

 
            option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {
                show: true,
                readOnly: true,
                title: "切换到图表",
                optionToContent: function(opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var tdHeaders = '<td>时间</td>'; //表头
                    series.forEach(function(item) {
                        tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                    });
                    var table = '<table border = "1" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                    var tdBodys = ''; //数据
                    for (let i = 0, l = axisData.length; i < l; i++) {
                        for (let j = 0; j < series.length; j++) {
                            tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                        }
                        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }

                    table += '</tbody></table>';
                    return table;
                }
            },
            magicType: {
                show: true,
                type: ['line', 'bar'],
                title: {
                    line: "切换到折线图",
                    bar: "切换到柱状图"
                }
            },
            restore: {
                show: true
            }
        }

    },
    legend: {
        data: ['环比活跃人数', '环比VIP活跃人数', '环比老用户活跃人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
            name: '环比活跃人数',
            type: 'bar',
            data: [-320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '环比VIP活跃人数',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '环比老用户活跃人数',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 310]
        }
    ]
};