ECharts數據圖表系統？ 5分鐘上手！

時間 2019-11-13

標籤 echarts 數據圖表系統 5分上手简体版

原文原文鏈接

目錄：

前言

簡介

方法一：模塊化單文件引入(推薦)

方法二：標籤式單文件引入

【前言】

　　最近在搗鼓各類插件各類框架，發現這個ECharts仍是比較不錯的，文檔也挺全的，仍是中文的，給你們推薦一下。javascript

　　這篇文章是零基礎入門ECharts圖表的教程，先簡單介紹一下吧，可能有人還不知道這個東西。html

【簡介】

　　ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。java

　　支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展示。chrome

　　好了，我們重點不是介紹哈，後面我會詳細講解這個報表系統的使用，這裏就不作過多的描述了，下面開始進入正題：「5分鐘上手寫ECharts的第一個圖表」。瀏覽器

【方法一：模塊化單文件引入(推薦)】

1. 新建一個echarts.html文件，爲ECharts準備一個具有大小(寬高)的Dom：echarts

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 
 7 <body>
 8     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 9     <div id="main" style="height:400px"></div>
10 </body>

新建一個echarts.html文件，爲ECharts準備一個具有大小（寬高）的Dom

2. 新建<script>標籤引入模塊化單文件echarts.js：框架

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts單文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
11 </body>

引入模塊化單文件

3. 新建<script>標籤中爲模塊加載器配置echarts和所需圖表的路徑(相對路徑爲從當前頁面連接到echarts.js)：dom

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts單文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
11     <script type="text/javascript">
12         // 路徑配置
13         require.config({
14             paths: {
15                 echarts: 'http://echarts.baidu.com/build/dist'
16             }
17         });
18     </script>
19 </body>

爲模塊加載器配置echarts和所需圖表的路徑

4. <script>標籤內動態加載echarts和所需圖表，回調函數中能夠初始化圖表並驅動圖表的生成：ide

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts單文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
11     <script type="text/javascript">
12         // 路徑配置
13         require.config({
14             paths: {
15                 echarts: 'http://echarts.baidu.com/build/dist'
16             }
17         });
18         
19         // 使用
20         require(
21             [
22                 'echarts',
23                 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
24             ],
25             function (ec) {
26                 // 基於準備好的dom，初始化echarts圖表
27                 var myChart = ec.init(document.getElementById('main')); 
28                 
29                 var option = {
30                     tooltip: {
31                         show: true
32                     },
33                     legend: {
34                         data:['銷量']
35                     },
36                     xAxis : [
37                         {
38                             type : 'category',
39                             data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
40                         }
41                     ],
42                     yAxis : [
43                         {
44                             type : 'value'
45                         }
46                     ],
47                     series : [
48                         {
49                             "name":"銷量",
50                             "type":"bar",
51                             "data":[5, 20, 40, 10, 10, 20]
52                         }
53                     ]
54                 };
55         
56                 // 爲echarts對象加載數據 
57                 myChart.setOption(option); 
58             }
59         );
60     </script>
61 </body>

動態加載echarts和所需圖表

5. 瀏覽器中打開ecarts.html，就能夠看到如下效果：模塊化

【方法二：標籤式單文件引入】

1. 新建一個echarts.html文件，爲ECharts準備一個具有大小(寬高)的Dom。

1 <!DOCTYPE html>
2 <head>
3     <meta charset="utf-8">
4     <title>ECharts - 孤影Blog</title>
5 </head>
6 <body>
7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
8     <div id="main" style="height:400px"></div>
9 </body>

新建一個echarts.html文件。爲ECharts準備一個具有大小（寬高）的Dom

2. 新建<script>標籤引入echart-all.js。

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts單文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
11 </body>

引入echarts-all.js

3. 新建<script>，使用全局變量echarts初始化圖表並驅動圖表的生成。

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts - 孤影'Blog</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height:400px"></div>
 9     <!-- ECharts單文件引入 -->
10     <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
11     <script type="text/javascript">
12         // 基於準備好的dom，初始化echarts圖表
13         var myChart = echarts.init(document.getElementById('main')); 
14         
15         var option = {
16             tooltip: {
17                 show: true
18             },
19             legend: {
20                 data:['銷量']
21             },
22             xAxis : [
23                 {
24                     type : 'category',
25                     data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
26                 }
27             ],
28             yAxis : [
29                 {
30                     type : 'value'
31                 }
32             ],
33             series : [
34                 {
35                     "name":"銷量",
36                     "type":"bar",
37                     "data":[5, 20, 40, 10, 10, 20]
38                 }
39             ]
40         };
41 
42         // 爲echarts對象加載數據 
43         myChart.setOption(option); 
44     </script>
45 </body>