标签：function java tps 数据 sim 写代码 series echart 工程
一：先在官网下载
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>
标签：function java tps 数据 sim 写代码 series echart 工程
原文地址：https://www.cnblogs.com/smartisn/p/11788486.html
