代码
提交代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Echarts Example</title> </head> <body> <div id="main" style="width: 600px;height: 400px"></div> <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script> <script type="text/javascript"> const myChart = echarts.init(document.getElementById('main')); const option = { toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value' }, legend: { // 指定图例数据项 // 注意此时不必指定 show 属性 data: [ // 使用对象形式配置图例项 { name: '邮件营销' }, { name: '联盟广告', // 内置icon icon: 'rect', }, { name: '视频广告', // 网络图片 icon: 'image://' + location.origin + '/assets/imooc-logo.png', }, { name: '直接访问', // base64 形式的icon icon: 'image://data:image/png;base64,iVBORw0...RU5ErkJggg==', }, // 混合使用字符串形式 '搜索引擎', ], }, series: [ { // 即使在图例中已经定义了 data 数组 // 在各序列中还是需要定义名称,并与 legend.data 数组对应 name: '邮件营销', type: 'line', stack: '总量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210], }, { name: '联盟广告', type: 'line', stack: '总量', areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310], }, { name: '视频广告', type: 'line', stack: '总量', areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410], }, { name: '直接访问', type: 'line', stack: '总量', areaStyle: {}, data: [320, 332, 301, 334, 390, 330, 320], }, { name: '搜索引擎', type: 'line', stack: '总量', areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320], }, ], }; myChart.setOption(option); </script> </body> </html>
运行结果