Echarts案例-折线图
一:先在官网下载
https://www.echartsjs.com/zh/download.html
然后再建立工程,导入这两个包:
写代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <!-- 这里是加载刚下好的echarts.min.js,注意路径 --> 8 <script src="echarts.min.js"></script> 9 </head> 10 <body> 11 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 12 <div id="main" style="width: 1000px;height:600px;"></div> 13 <script type="text/javascript"> 14 // 基于准备好的dom,初始化echarts实例 15 16 var myChart = echarts.init(document.getElementById('main')); 17 18 // 指定图表的配置项和数据 19 var option = { 20 title: { 21 text: '折线图堆叠' 22 }, 23 tooltip: { 24 trigger: 'axis' 25 }, 26 legend: { 27 data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] 28 }, 29 grid: { 30 left: '3%', 31 right: '4%', 32 bottom: '3%', 33 containLabel: true 34 }, 35 toolbox: { 36 feature: { 37 saveAsImage: {} 38 } 39 }, 40 xAxis: { 41 type: 'category', 42 boundaryGap: false, 43 data: ['周一','周二','周三','周四','周五','周六','周日'] 44 }, 45 yAxis: { 46 type: 'value' 47 }, 48 series: [ 49 { 50 name:'邮件营销', 51 type:'line', 52 stack: '总量', 53 data:[120, 132, 101, 134, 90, 230, 210] 54 }, 55 { 56 name:'联盟广告', 57 type:'line', 58 stack: '总量', 59 data:[220, 182, 191, 234, 290, 330, 310] 60 }, 61 { 62 name:'视频广告', 63 type:'line', 64 stack: '总量', 65 data:[150, 232, 201, 154, 190, 330, 410] 66 }, 67 { 68 name:'直接访问', 69 type:'line', 70 stack: '总量', 71 data:[320, 332, 301, 334, 390, 330, 320] 72 }, 73 { 74 name:'搜索引擎', 75 type:'line', 76 stack: '总量', 77 data:[820, 932, 901, 934, 1290, 1330, 1320] 78 } 79 ] 80 }; 81 82 // 使用刚指定的配置项和数据显示图表。 83 myChart.setOption(option); 84 // 处理点击事件并且跳转到相应的百度搜索页面 85 myChart.on('click', function (params) { 86 window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); 87 }); 88 </script> 89 </body> 90 </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)