日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

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

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

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

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

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

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

這里使用ECharts繪制一個(gè)簡(jiǎn)單的柱狀圖圖表。

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

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

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

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

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

第三步，初始化echarts實(shí)例對(duì)象。

通過(guò)echarts.init()方法初始化一個(gè)echarts實(shí)例對(duì)象。代碼如下：

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

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

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

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

第五步，生成顯示圖表。

通過(guò)echarts實(shí)例對(duì)象調(diào)用setOption(option)方法，使用option指定的配置項(xiàng)和數(shù)據(jù)，顯示一個(gè)圖表，如簡(jiǎn)單的柱狀圖。

下面是完整代碼。

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

代碼如下：

運(yùn)行效果如圖6-2所示。

這里對(duì)圖形中的各種組件進(jìn)行簡(jiǎn)單注解，如圖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á)了特定的信息。但這些組件并不都是必備的，當(dāng)信息足夠清晰時(shí)，可以精簡(jiǎn)部分組件，使得圖表更加簡(jiǎn)潔。6.2節(jié)將會(huì)對(duì)各種組件進(jìn)行詳細(xì)的介紹。

1. echarts實(shí)例

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

2. 系列(series)

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

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

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

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

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

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

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

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

3. option配置項(xiàng)

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

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

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

4. 坐標(biāo)系

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

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

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