狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

近年來，可視化越來越流行，許多門戶網站、新聞、媒體都大量使用可視化技術，使得復雜的數據和文字變得十分容易理解。有一句諺語“一張圖片價值于一千個字”，的確如此。各種數據可視化工具也如井噴式地發展，ECharts正是其中的佼佼者。

ECharts是基于Canvas技術進行圖表繪制的，準確地說，ECharts的底層依賴于輕量級的Canvas類庫ZRender。ZRender是百度團隊開發的，它通過Canvas繪圖時會調用Canvas的一些接口。通常情況下，使用ECharts開發圖表時，并不會直接涉及類庫ZRender。ECharts基礎架構如圖6-1所示。

在ECharts基礎架構中，基礎庫的上層有3個模塊： 組件、圖類和接口。

組件模塊包含坐標軸(axis)、網格(grid)、極坐標(polar)、標題(title)、提示(tooltip)、圖例(legend)、數據區域縮放(dataZoom)、值域漫游(dataRange)、工具箱(toolbox)、時間軸(timeline)。

ECharts的圖類模塊近30種，常用的圖類有柱狀圖(bar)、折線圖(line)、散點圖(scatter)、K線圖(k)、餅圖(pie)、雷達圖(radar)、地圖(map)、儀表盤(gauge)、漏斗圖(funnel)。圖類與組件共同組成了一個圖表，如果只是制作圖表的話，只需掌握好圖類與組件即可完成80%左右的功能。

另外，20%左右的功能涉及更高級的特性。例如，當單擊某個圖表上的某個區域的時候，能跳轉到另外一個圖表上； 或當單擊圖表上的某個區域時，將展示另外一個區域中的數據，即圖表組件的聯動效果。此時，需要用到ECharts接口和事件編程。

這里使用ECharts繪制一個簡單的柱狀圖圖表。

第一步，創建HTML頁面。

在保存echarts.js的文件夾新建一個index1.html文件，代碼如下：

第二步，為ECharts準備一個具備高寬的DOM容器。

在繪圖前需要為ECharts準備一個定義了高寬的DOM容器。在</head>之后添加，代碼如下：

實例中，id為main的div，用于包含ECharts繪制的圖表。

第三步，初始化echarts實例對象。

通過echarts.init()方法初始化一個echarts實例對象。代碼如下：

ECharts從初始一直使用 Canvas 繪制圖表。而ECharts v4.0以后發布了 SVG 渲染器，從而提供了一種新的選擇。只需在初始化一個echarts圖表實例對象時，設置renderer 參數為'canvas'或'svg'即可指定渲染器。

至于選擇哪種渲染器，一般來說，Canvas 更適合繪制圖形元素數量較多(這一般是由數據量大導致)的圖表(如熱力圖、地理坐標系或平行坐標系上的大規模線圖或散點圖等)，也利于實現某些視覺特效。但是，在不少場景中，SVG 具有重要的優勢： 它的內存占用更低(這對移動端尤其重要)，并且用戶使用瀏覽器內置的縮放功能時不會模糊。

第四步，設置配置信息。

ECharts使用json格式來指定圖表的配置項和數據。

第五步，生成顯示圖表。

通過echarts實例對象調用setOption(option)方法，使用option指定的配置項和數據，顯示一個圖表，如簡單的柱狀圖。

下面是完整代碼。

【例6-1】制作ECharts的商品銷售情況柱狀圖。

代碼如下：

運行效果如圖6-2所示。

這里對圖形中的各種組件進行簡單注解，如圖6-1所示。一張圖表一般包含用于顯示數據的網格區域、x坐標軸、y坐標軸(包括坐標軸標簽、坐標軸刻度、坐標軸分隔線、坐標軸箭頭)、標題、圖例、數據系列等組件。

這些組件都在圖表中扮演著特定的角色，表達了特定的信息。但這些組件并不都是必備的，當信息足夠清晰時，可以精簡部分組件，使得圖表更加簡潔。6.2節將會對各種組件進行詳細的介紹。

1. echarts實例

一個網頁中可以創建多個 echarts 實例。每個echarts實例中可以創建多個圖表和坐標系等。DOM節點作為echarts的渲染容器，每個echarts獨占一個DOM。

2. 系列(series)

系列是一組數值以及將數值映射成的圖表。

一個系列包含的要素： 一組數值、圖表類型(series.type)以及其他的關于這些數據如何映射成圖表的參數等。

(1) 圖表類型(series.type)包括： line(折線圖)、bar(柱狀圖)、pie(餅圖)、scatter(散點圖)、graph(關系圖)、tree(樹狀圖)等。

(2) 數據(series.data)： 圖表使用的數值。

ECharts 4以前，數據只能聲明在各個“系列(series)”中，ECharts 4開始支持dataset組件，用于單獨的數據集聲明，從而數據可以單獨管理，被多個組件復用，并且可以基于數據指定數據到視覺的映射。

關于數據我們會在后面進行學習，這里不展開詳細敘述。

(3) 通用的樣式(series.itemStyle)。

通用的樣式包括陰影、透明度、顏色、邊框顏色、邊框寬度等。

3. option配置項

option配置項表述了數據、數據如何映射成圖形、交互行為。

例如，使用option配置項來描述對圖表的各種需求，包括有什么數據、要畫什么圖表、圖表長什么樣子、含有什么組件、組件能操作什么事情等。

option是個JavaScript對象，它的內部有大量的屬性，每個屬性是一類組件； 而多個同類組件可以組成數組。

4. 坐標系

很多系列需要運行在“坐標系”上。例如，line(折線圖)、bar(柱狀圖)等需要在“坐標系”上才能運行。

一個坐標系，可能由多個組件協作而成。我們以最常見的直角坐標系來舉例。直角坐標系中包括xAxis(直角坐標系X軸)、yAxis(直角坐標系Y軸)和grid(網格)三種組件。

一個系列往往能運行在不同的坐標系中。例如，一個scatter(散點圖)能運行在直角坐標系、極坐標系、地理坐標系(GEO)等各種坐標系中。同樣，一個坐標系也能承載不同的系列。