亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

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

在ECharts基礎(chǔ)架構(gòu)中，基礎(chǔ)庫的上層有3個模塊： 組件、圖類和接口。

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

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

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

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

第一步，創(chuàng)建HTML頁面。

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

第二步，為ECharts準(zhǔn)備一個具備高寬的DOM容器。

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

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

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

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

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

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

第四步，設(shè)置配置信息。

ECharts使用json格式來指定圖表的配置項和數(shù)據(jù)。

第五步，生成顯示圖表。

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

下面是完整代碼。

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

代碼如下：

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

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

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

1. echarts實例

一個網(wǎng)頁中可以創(chuàng)建多個 echarts 實例。每個echarts實例中可以創(chuàng)建多個圖表和坐標(biāo)系等。DOM節(jié)點作為echarts的渲染容器，每個echarts獨占一個DOM。

2. 系列(series)

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

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

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

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

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

關(guān)于數(shù)據(jù)我們會在后面進行學(xué)習(xí)，這里不展開詳細敘述。

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

通用的樣式包括陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊取?/span>

3. option配置項

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

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

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

4. 坐標(biāo)系

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

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

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