ECharts快速入門

時間 2019-11-18

標籤 echarts 快速入門简体版

原文原文鏈接

一.簡介

　　ECharts，一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。html

二.特色

　　1.豐富的可視化類型前端

　　　　ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行座標，還有用於 BI 的漏斗圖，儀表盤，而且支持圖與圖之間的混搭。node

除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只須要傳入一個renderItem函數，就能夠從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不須要操心其它事情。git

　　　　你能夠在下載界面下載包含全部圖表的構建文件，若是隻是須要其中一兩個圖表，又嫌包含全部圖表的構建文件太大，也能夠在在線構建中選擇須要的圖表類型後自定義構建。github

　　2.多種數據格式無需轉化能夠直接使用canvas

　　　　ECharts 內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數據源，經過簡單的設置 encode 屬性就能夠完成從數據到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數據轉換的步驟，並且多個組件可以共享一份數據而不用克隆。小程序

爲了配合大數據量的展示，ECharts 還支持輸入 TypedArray 格式的數據，TypedArray 在大數據量的存儲中能夠佔用更少的內存，對 GC 友好等特性也能夠大幅度提高可視化應用的性能。微信小程序

　　3.千萬數據的前端展現瀏覽器

　　　　經過增量渲染技術（4.0+），配合各類細緻的優化，ECharts 可以展示千萬級的數據量，而且在這個數據量級依然可以進行流暢的縮放平移等交互。微信

幾千萬的地理座標數據就算使用二進制存儲也要佔上百 MB 的空間。所以 ECharts 同時提供了對流加載（4.0+）的支持，你可使用 WebSocket 或者對數據分塊後加載，加載多少渲染多少！不須要漫長地等待全部數據加載完再進行繪製。

　　4.跨平臺

　　　　ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 能夠兼容低版本 IE，SVG 使得移動端再也不爲內存擔心，Canvas 能夠輕鬆應對大數據量和特效的展示。不一樣的渲染方式提供了更多選擇，使得 ECharts 在各類場景下都有更好的表現。

除了 PC 和移動端的瀏覽器，ECharts 還能在 node 上配合 node-canvas 進行高效的服務端渲染（SSR）。從 4.0 開始咱們還和微信小程序的團隊合做，提供了 ECharts 對小程序的適配！

　　5.多維數據的支持以及豐富的視覺編碼手段

　　　　ECharts 3 開始增強了對多維數據的支持。除了加入了平行座標等常見的多維數據可視化工具外，對於傳統的散點圖等，傳入的數據也能夠是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，可以將不一樣維度的數據映射到顏色，大小，透明度，明暗度等不一樣的視覺通道。

　　6.動態數據

　　　　ECharts 由數據驅動，數據的改變驅動圖表展示的改變。所以動態數據的實現也變得異常簡單，只須要獲取數據，填入數據，ECharts 會找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。配合 timeline 組件可以在更高的時間維度上去表現數據的信息。

　　7.絢麗的特效

　　　　ECharts 針對線數據，點數據等地理數據的可視化提供了吸引眼球的特效。

三.代碼實現【柱狀圖】

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4    <meta charset="UTF-8">
  5    <title>ECharts入門</title>
  6 </head>
  7 <body>
  8    <!-- 爲ECharts準備一個具有大小（寬高）的DOM容器-->
  9    <div id='main' style='width:800px;height:600px;'></div>
 10    <!-- 引入ECharts文件 -->
 11    <script src='js/echarts.js'></script>
 12    <script>
 13         //基於準備好的DOM，初始化echarts實例
 14         var myChart =echarts.init(document.getElementById('main'));
 15           //指定圖表的配置項和數據
 16         var option = {
 17             title:{
 18                 text:'稽查工單熱詞top10',
 19                 textStyle:{
 20                     color:'blue'
 21                 },
 22                 subtext:'測試'
 23             },
 24             //提示框組件
 25             tooltip:{
 26                 //座標軸觸發，主要用於柱狀圖，折線圖等
 27                 trigger:'axis'
 28             },
 29             //圖例
 30             legend:{
 31                 data:['頻度']
 32             },
 33             toolbox:{
 34                 show:true,
 35                 feature:{
 36                     mark:{show:true},
 37                     dataView:{show:true,readOnly:false},
 38                     magicType:{show:true,type:['line','bar']},
 39                     restore:{show:true},
 40                     saveAsImage:{show:true}
 41                 }
 42             },
 43             calculable:true,
 44             //橫軸
 45             xAxis:{
 46                 type:'category',
 47                 name:'高頻詞彙',
 48                 data:["稽查","流程","覈實","問題","現場","質量","管理","用戶","系統","整改"],
 49                 axisLabel:{
 50                     show:true,
 51                     textStyle:{
 52                         fontSize:16
 53                     }
 54                 }
 55             },
 56             //縱軸
 57             yAxis:{
 58                   type:'value',
 59                   name:'次數',
 60                   axisLabel:{
 61                        show:true,
 62                        textStyle:{
 63                            fontSize:16
 64                        }
 65                    }
 66             },
 67             //系列列表。每一個系列經過type決定本身的圖表類型
 68             series:[{
 69                 name:'次數',
 70                 type:'bar',
 71                 itemStyle:{
 72                     normal:{
 73                         color:function(params){
 74                             var colorList = [
 75                                 '#CC252B','#B5C334','#FCCE10','#E87C25','#27727B',
 76                                 '#FE8463','#9BCA63','#44D866','#F3A43B','#60C0DD'
 77                             ];
 78                             return colorList[params.dataIndex]
 79                         },
 80                         label:{
 81                             show:true,
 82                             position:'top',
 83                             formatter:'{c}',
 84                             fontSize:16
 85                         }
 86                     }
 87                 },
 88                 data:[236, 216, 186, 152, 132, 122, 121, 110, 101, 86]
 89                 //,
 90                 /*markPoint:{
 91                     data:[
 92                         {type:'max',name:'最大值'},
 93                         {type:'min',name:'最小值'}
 94                     ]
 95                 } ,
 96                 markLine:{
 97                     data:[
 98                         {type:'average',name:'平均值'}   
 99                     ]
100                 } */
101             }]
102         };
103         //使用剛指定的配置項和數據顯示圖表
104         myChart.setOption(option);
105    </script>
106 </body>
107 </html>

四.結果展現

1. echarts快速入門
2. Echarts快速入門案例
3. eCharts 快速入門實例
4. Echarts快速入門 5分鐘上手
5. ES6快速入門 ES6 快速入門
6. 快速入門
7. Hadoop快速入門
8. Sqoop 快速入門
9. Shell快速入門
10. vim快速入門
更多相關文章...
• SQL 快速參考 - SQL 教程
• Eclipse 快速修復 - Eclipse 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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