10分钟了解何为ECharts
一、Echarts是如何畫圖的
在ECharts 5沒有出現之前，ECharts官方的首頁還不是現在的簡約風格。打開后映入眼簾的是一個很有科技感的視頻，作為一個前端小白來講，哇，前端還能這么秀？相信很多人都會有這樣的想法，因為沒有深入了解過大前端的小白們大都無法將數組、對象和眼前這個直觀的圖表聯系起來。但是如果仔細研究后會發現，ECharts的原理其實也沒有那么難。
整個ECharts庫都是以canvas為基礎的！canvas是一個可以在頁面上固定的畫圖區域建立坐標系，然后通過JavaScript腳本在坐標系中繪制圓、盒、文字等。比如下面這段代碼：
<canvas id="canvasArea" width="300" height="300"></canvas> canvas {border: 1px solid black; } function draw(){var canvas = document.getElementById('canvasArea');var ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50); } draw();這是一段簡單的canvas代碼，用來生成兩個矩形，在瀏覽器中顯示的結果如下：
上圖中黑色邊框圈起來的區域便是畫圖區域。利用坐標和寬窄，canvas便會自動幫助我們生成我們想要圖案。
理解清楚這一步以后，就可以理解ECharts究竟做了什么了：Echarts拿到數據后，通過一系列的計算，算出canvas繪制圖案時所需要的數據（坐標、高度、寬度等）；最終通過canvas，繪制出各色圖表。
Created with Rapha?l 2.2.0 原始數據 ECharts中的算法計算canvas繪制圖表時需要的數據 canvas通過數據繪制圖表 最終顯示在瀏覽器中的圖表二、組件化——讓開發者定制圖表的解決方案
為了能滿足用戶的需求，ECharts對個色圖表的組成也做了研究，并將其稱之為組件。ECharts中的組件包括xAxis（直角坐標系 X 軸）、yAxis（直角坐標系 Y 軸）、grid（直角坐標系底板）、angleAxis（極坐標系角度軸）、radiusAxis（極坐標系半徑軸）、polar（極坐標系底板）、geo（地理坐標系）、dataZoom（數據區縮放組件）、visualMap（視覺映射組件）、tooltip（提示框組件）、toolbox（工具欄組件）、series（系列）等等等等，幾乎是滿足了所有圖表的需求。
為了更直觀的展示這些組件是如何完善圖表的，官方教程中給出了這樣的一張圖：
可以看到ECharts對整個圖表中的各個部分都做了拆分，組件化為使用者提供了更多的選擇，讓ECharts在高度封裝的前提下，又能滿足開發者們的自定義需要。
三、ECharts如何了解你的想法
當然，ECharts有了非常好的解決方案，但也需要一種簡潔的方法來了解開發者的想法，降低學習成本是一個優秀框架的前提，過高的學習成本會阻礙一個優秀框架的進步。萬幸的是ECharts解決了這個問題。
仔細研究上面canvas確定繪圖區域的方法，會發現canvas是結合DOM來選定繪圖區域來最終確定坐標系的，這樣做的好處的，可以通過CSS來控制最終圖表的位置，繪圖區域的調整和修改最終也不會影響到繪圖的結果。ECharts在選取繪制區域上也使用了這一種方法：
<body><!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> </body> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'));上面中通過dom確定了接下來的繪圖區域。無論后續繪圖區域的位置及寬高如何變化，ECharts都會基于該元素繪制圖表。
確定在哪繪圖后，ECharts需要了解開發者需要怎樣的圖表，基于組件化的設計，ECharts規定了開發者需要通過一個簡單的option對象，來配置圖表中的各個組件，例如官方文檔中的簡單例子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script> </head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>
可以看出option對象中的屬性最終都以組件的方式展示在了圖表中：title屬性被展示為圖表的標題，legend屬性被渲染成為圖表的圖例，xAxis屬性被渲染成X軸，series屬性被渲染成了柱狀圖（series是ECharts中的一個基礎概念，它指一組數值以及他們映射成的圖，后面的文章中會有介紹）。
四、ECharts真正的魅力
理解完上面的內容，會發現ECharts的語法真的非常簡單，熟練運用后，制作圖表或許比一點一點的調整CSS更容易，但這只是一個開始。
在我看來，ECharts真正的魅力在于除了繪圖，它會幫你完成很多看似無關緊要的細節，比如動畫效果：
除了這種初次加載時的動畫，還包括一些數據加載中的動畫效果，你會驚訝的發現這些效果不僅僅作用在核心圖上，整個圖表的組件都會跟隨動畫進行變動：
這些用心的小細節會讓頁面的使用者更加舒心。當然ECharts除了這些還有很多驚艷的地方，小到組件上的一些小細節，大到繪制3D圖表等，也難怪它的運用范圍如此廣泛。
五、不安于現狀的ECharts
ECharts本身已經十分優秀了，項目覆蓋率也非常的廣，但是ECharts 5又一次創造了變革。拋開數據層面的進步不說，使用svg渲染代替canvas渲染就已經讓人十分乘醉。
先對比一下在瀏覽器中放大250%后兩種渲染方式的區別，先看canvas下渲染的：
發現了什么？放大250%后，圖表已經已經完全虛化。再看看svg下渲染的結果：
看出差距了嗎？svg完全解決了虛化的問題，真的是強迫癥工程師的福音。
我們再看看兩種渲染結果在最終的html文檔中的表現，先看canvas的：
看出來了嗎？canvas最終在html里面只有一個標簽，即容器標簽，所有的操作都是在JavaScript腳本中進行的，再看看svg的：
svg渲染后，圖中的每一個元素都會以標簽的形式展現在最終的html文檔中，這樣做的好處就是給哪些大佬們提供了自我發揮的空間，雖然我暫時沒有嘗試，但是，svg可能的確會使ECharts變得更加靈活。
參考和應用
https://echarts.apache.org/zh/index.html （Apache ECharts官網）
https://www.runoob.com/w3cnote/html5-canvas-intro.html （《學習 HTML5 Canvas 這一篇文章就夠了》（菜鳥教程））
總結
以上是生活随笔為你收集整理的10分钟了解何为ECharts的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿蒙系统概述（HarmonyOS）学习这
- 下一篇： 高调做人 低调做事