Echarts案例-折線圖

時間 2019-11-11

標籤 echarts 案例折線简体版

原文原文鏈接

一：先在官網下載javascript

https://www.echartsjs.com/zh/download.htmlhtml

而後再創建工程，導入這兩個包：java

寫代碼：echarts

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。