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

本文轉載自查看原文 2014-12-20 09:31 5493 組件插件前端

目錄：

前言

簡介

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

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

【前言】

　　最近在搗鼓各種插件各種框架，發現這個ECharts還是比較不錯的，文檔也挺全的，還是中文的，給大家推薦一下。

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

【簡介】

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

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

　　好了，咱們重點不是介紹哈，后面我會詳細講解這個報表系統的使用，這里就不做過多的描述了，下面開始進入正題：“5分鍾上手寫ECharts的第一個圖表”。

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

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

 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)：

 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和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成：

 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>

使用全局變量echarts初始化圖表並驅動圖表的生成

4. 瀏覽器中打開echarts.html，可以看到如下效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ECharts模塊化使用5分鍾上手在vue中使用Echarts[官方5分鍾上手ECharts] 10分鍾上手圖數據庫Neo4j Gradle 10分鍾上手指南 1-5分鍾上手自動化測試——Airtest+Poco快速上手 30分鍾快速上手Docker，看這篇就對了！ 10分鍾快速上手 SpringCloudAlibaba（nacos注冊中心）學一點Git--20分鍾git快速上手推薦一款全能測試開發神器：Mockoon！1分鍾快速上手！ Sentry(v20.12.1) K8S 雲原生架構探索，1分鍾上手 JavaScript 性能監控