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=" 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>