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 = '时间'; //表头 series.forEach(function(item) { tdHeaders += '' + item.name + ''; //组装表头 }); var table = '' + tdHeaders + ''; var tdBodys = ''; //数据 for (let i = 0, l = axisData.length; i < l; i++) { for (let j = 0; j < series.length; j++) { tdBodys += ''; //组装表数据 } table += '' + tdBodys + ''; tdBodys = ''; } table += '

' + series[j].data[i] + '

' + axisData[i] + '

'; 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] } ] };

Echarts在线免费图表