數(shù)據(jù)可視化原理及應(yīng)用

樊銀亭夏敏捷主編清華大學(xué)出版社第6章ECharts繪制圖表入門6.1ECharts圖表入門6.2ECharts配置項和組件6.3ECharts數(shù)據(jù)集6.1ECharts圖表入門各種數(shù)據(jù)可視化工具也如井噴式地發(fā)展，ECharts正是其中的佼佼者。本章開始進入ECharts圖表繪制。ECharts是基于Canvas技術(shù)進行圖表繪制的，準確地說，ECharts的底層依賴于輕量級的Canvas類庫ZRender。ZRender是百度團隊開發(fā)的，它通過Canvas繪圖時會調(diào)用Canvas的一些接口。通常情況下，使用ECharts開發(fā)圖表時，并不會直接涉及類庫ZRender。ECharts基礎(chǔ)架構(gòu)如圖6-1所示。6.1ECharts圖表入門ECharts基礎(chǔ)架構(gòu)在ECharts基礎(chǔ)架構(gòu)中基礎(chǔ)庫的上層有3個模塊：組件、圖類和接口。6.1ECharts圖表入門在ECharts基礎(chǔ)架構(gòu)中基礎(chǔ)庫的上層有3個模塊：組件、圖類和接口。組件模塊包含坐標軸（axis）、網(wǎng)格（grid）、極坐標（polar）、標題（title）、提示（tooltip）、圖例（legend）、數(shù)據(jù)區(qū)域縮放（dataZoom）、值域漫游（dataRange）、工具箱（toolbox）、時間軸（timeline）。ECharts的圖類模塊近30種，常用的圖類有柱狀圖（bar）、折線圖（line）、散點圖（scatter）、K線圖（k）、餅圖（pie）、雷達圖（radar）、地圖（map）、儀表盤（gauge）、漏斗圖（funnel）。圖類與組件共同組成了一個圖表，如果只是制作圖表的話，只需掌握好圖類與組件即可完成80%左右的功能。另外20%左右的功能涉及更高級的特性。例如，當單擊某個圖表上某個區(qū)域的時候，能跳轉(zhuǎn)到另外一個圖表上；或當單擊圖表上的某個區(qū)域時，將展示另外一個區(qū)域中的數(shù)據(jù)，即圖表組件的聯(lián)動效果。此時，需要用到ECharts接口、事件編程。創(chuàng)建第一個ECharts圖表獲取ECharts庫文件后，創(chuàng)建ECharts圖表的步驟如下。（1）在.html文件中，引入echarts.js庫文件。ECharts的引入方式像JavaScript庫文件一樣，使用script標簽引入即可。此處需要注意echarts.js庫文件的存放路徑，如果找不到存放路徑，那么將無法顯示圖表。通過CDN方式引入庫文件，這種引入方式的好處是不需要下載echarts.js庫文件，但是需要實時連接網(wǎng)絡(luò)。（2）準備一個指定了大小的div容器，即具備weight和height。ECharts圖形是基于DOM進行繪制的，所以在繪制圖形前要先繪制一個DOM容器div來承載圖形。在添加了div容器后，需要設(shè)置它的基本屬性：寬（weight）與高（height）。這兩個屬性決定了繪制的圖表大小。繪制一個div容器并設(shè)置容器的樣式，容器可以設(shè)置的樣式并不僅限于寬與高，還可以設(shè)置其他屬性，如定位等。創(chuàng)建第一個ECharts圖表（3）使用init方法初始化容器。通過步驟（1）引入echarts.js庫文件后，會自動創(chuàng)建一個全局變量echarts。創(chuàng)建全局變量echarts有若干方法。基于準備好的DOM，通過echarts.init方法可以初始化ECharts實例。（4）設(shè)置圖形配置項和數(shù)據(jù)。option的設(shè)置是ECharts中的重點和難點，option的配置項參數(shù)等設(shè)置決定了繪制出的是什么樣的圖形。第3章中將會對option的配置項參數(shù)進行詳細的說明，此處通過配置option項繪制一個簡單的柱狀圖。（5）使用指定的配置項和數(shù)據(jù)顯示渲染圖表。在繪制ECharts圖表的過程中，setOption是執(zhí)行繪制動作的方法，為初始化的myChart設(shè)置option進行圖表繪制?！纠?-1】制作ECharts的商品銷售情況柱狀圖。6.1.3ECharts基礎(chǔ)概念解釋1．echarts實例一個網(wǎng)頁中可以創(chuàng)建多個echarts實例。每個echarts實例中可以創(chuàng)建多個圖表和坐標系等。DOM節(jié)點作為echarts的渲染容器，每一個echart獨占一個DOM。2．系列（series）系列是一組數(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ù)值。ECharts4以前，數(shù)據(jù)只能聲明在各個“系列（series）”中，ECharts4開始支持了dataset組件用于單獨的數(shù)據(jù)集聲明，從而數(shù)據(jù)可以單獨管理，被多個組件復(fù)用，并且可以基于數(shù)據(jù)指定數(shù)據(jù)到視覺的映射。關(guān)于數(shù)據(jù)我們會在后面進行學(xué)習(xí)，這里不展開詳細敘述。（3）通用的樣式（series.itemStyle）包括陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊取?.1.3ECharts基礎(chǔ)概念解釋3．option配置項option配置項表述了數(shù)據(jù)、數(shù)據(jù)如何映射成圖形、交互行為。例如使用option配置項來描述對圖表的各種需求，包括：有什么數(shù)據(jù)、要畫什么圖表、圖表長什么樣子、含有什么組件、組件能操作什么事情等等。option是個JavaScript對象，它的內(nèi)部有大量的屬性，每個屬性是一類組件。而多個同類組件，可以組成數(shù)組。4．坐標系很多系列需要運行在“坐標系”上。例如line（折線圖）、bar（柱狀圖）等，需要在“坐標系”上才能運行。一個坐標系，可能由多個組件協(xié)作而成。我們以最常見的直角坐標系來舉例。直角坐標系中，包括有xAxis（直角坐標系X軸）、yAxis（直角坐標系Y軸）、grid（網(wǎng)格）三種組件。一個系列，往往能運行在不同的坐標系中。例如，一個scatter（散點圖）能運行在直角坐標系、極坐標系、地理坐標系（GEO）等各種坐標系中。同樣，一個坐標系也能承載不同的系列。6.2ECharts配置項和組件ECharts圖表中常見的配置項參數(shù)如表6-1所示。6.2ECharts配置項和組件ECharts圖表中常見的配置項參數(shù)如表6-1所示。下面對一些常用配置項進行舉例說明。1．標題（title）為圖表配置標題。title:{text:'第一個ECharts實例'}2．提示框（tooltip）配置提示信息。tooltip:{formatter:"{a}<br/>:{c}(skoa6qm%)"http://例如出現(xiàn)銷量羊毛衫:20},6.2ECharts配置項和組件3．圖例組件（legend）圖例組件展現(xiàn)了不同系列的標記(symbol)，顏色和名字。可以通過單擊圖例控制哪些系列不顯示。legend:{data:[{name:'系列1',//強制設(shè)置圖形為圓。icon:'circle',//設(shè)置文本為紅色textStyle:{color:'red'}}]}6.2ECharts配置項和組件4．X軸（xAxis）配置要在X軸顯示的項。xAxis:{data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}5．Y軸（yAxis）配置要在Y軸顯示的項。yAxis:{}6．系列列表（series）每個系列通過type決定自己的圖表類型。series:[{name:'銷量',//系列名稱type:'bar',//系列圖表類型data:[5,20,36,10,10,20]//系列中的數(shù)據(jù)內(nèi)容}]每個系列通過type決定自己的圖表類型。例如：type:'bar'：柱狀/條形圖type:'line'：折線圖type:'pie'：餅圖type:'scatter'：散點（氣泡）圖type:'radar'：雷達圖6.2ECharts配置項和組件每個系列都有自己的數(shù)據(jù)（series.data）。圖6-3中的option中聲明了三個系列（series）：pie（餅圖系列）、line（折線圖系列）、bar（柱狀圖系列），每個系列中有他所需要的數(shù)據(jù)。6.2.2ECharts樣式設(shè)置1．調(diào)色盤調(diào)色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。調(diào)色盤可以在option中設(shè)置。可以設(shè)置全局的調(diào)色盤，也可以設(shè)置系列自己專屬的調(diào)色盤。例如：option={//全局調(diào)色盤color:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#6e7074','#c4ccd3'],series:[{type:'bar',//此系列自己的調(diào)色盤。color:['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53',,'#73b9bc','#7289ab','#f49f42'],...},{type:'pie',//此系列自己的調(diào)色盤。color:['#37A2DA','#32C5E9','#67E0E3','#9FE6B8','#FFDB5C','#E690D1','#e7bcf3','#9d96f5','#8378EA','#96BFFF'],...}]}6.2.2ECharts樣式設(shè)置2．直接的樣式設(shè)置直接的樣式設(shè)置是比較常用設(shè)置方式。縱觀ECharts的option中，很多地方可以設(shè)置itemStyle、lineStyle、areaStyle、label等等。這些的地方可以直接設(shè)置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。一般來說，ECharts的各個系列和組件，都遵從這些命名習(xí)慣，雖然不同圖表和組件中，itemStyle、label等可能出現(xiàn)在不同的地方。（1）itemStyleitemStyle參數(shù)可以設(shè)置諸如陰影、透明度、顏色、邊框顏色、邊框?qū)挾鹊?。例如：itemStyle:{borderWidth:5,//邊框?qū)挾?，用于設(shè)置數(shù)據(jù)圖形元素的邊框?qū)挾萣orderType://邊框類型，用于設(shè)置數(shù)據(jù)圖形元素的邊框類型屬性color:'rgba(22,75,247,0.1)',//用于設(shè)置數(shù)據(jù)圖形元素的顏色//添加陰影效果shadowBlur:20,//陰影的大小shadowColor:'rgba(0,0,0,0.5)'}6.2.2ECharts樣式設(shè)置2．直接的樣式設(shè)置（2）lineStyleLineStyle的屬性值來實現(xiàn)基本線條樣式的展現(xiàn)，比如我們可以通過設(shè)置線條的顏色、寬度、類型等屬性來定義線條的基本風(fēng)格。具體屬性如下：lineStyle:{color:'red',//線條顏色

width:2,//線條寬度

type:'solid',//線條類型

smooth:false//是否平滑

//添加線條陰影效果，增強線條的立體感和層次感

shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10,shadowOffsetX:5,shadowOffsetY:5}6.2.2ECharts樣式設(shè)置2．直接的樣式設(shè)置（3）label設(shè)置標簽的文字。

label:{show:true,formatter:'顯示的標簽內(nèi)容'//標簽的文字

}6.2.2ECharts樣式設(shè)置3．高亮的樣式在鼠標懸浮到圖形元素上時，一般會出現(xiàn)高亮的樣式。默認情況下，高亮的樣式是根據(jù)普通樣式自動生成的。如果要自定義高亮樣式可以通過emphasis參數(shù)來定制，例如：emphasis:{//高亮樣式

itemStyle:{//高亮?xí)r的顏色

color:'red'},label:{show:true,//高亮?xí)r標簽的文字

formatter:'高亮?xí)r顯示的標簽內(nèi)容'}},6.2.3ECharts直角坐標系下的網(wǎng)格及坐標軸使用ECharts繪制圖表時，可能會發(fā)現(xiàn)圖表真正的繪圖區(qū)域和圖表容器之間有一些間隔，有時看上去不太協(xié)調(diào)。查看相關(guān)API可以得知，可以通過調(diào)整幾個屬性值控制繪圖區(qū)域與容器之間的間距。因此，需要了解直角坐標系下如何繪制網(wǎng)格（grid）及其作用、如何繪制直角坐標系下的x軸（xAxis）和y軸（yAxis）。6.2.3ECharts直角坐標系下的網(wǎng)格及坐標軸在ECharts的直角坐標系下，有兩個重要的組件：網(wǎng)格（grid）和坐標軸（axis）。ECharts中的網(wǎng)格是直角坐標系下定義網(wǎng)格布局和大小及其顏色的組件，用于定義直角坐標系整體布局。如果一個容器中定義多圖表，則網(wǎng)格定義圖表的位置。ECharts中的網(wǎng)格組件中所有屬性參數(shù)如表6-3所示。6.2.3ECharts直角坐標系下的網(wǎng)格6.2.3ECharts直角坐標系下的網(wǎng)格及坐標軸定義網(wǎng)格布局和大小的6個參數(shù)如圖所示。由ECharts網(wǎng)格組件參數(shù)表和下圖可知，共有6個主要參數(shù)定義網(wǎng)格布局和大小。其中，x與y用于定義網(wǎng)格的左上角的位置；x2與y2用于定義網(wǎng)格的右下角的位置；width與height用于定義網(wǎng)格的寬度和高度；指定width后將忽略x2，指定height后將忽略y2。直角坐標系下的坐標軸直角坐標系下有3種類型的坐標軸（axis）：類目型（category）、數(shù)值型（value）和時間型（time）。（1）類目型：必須指定類目列表，坐標軸內(nèi)有且僅有這些指定類目坐標。（2）數(shù)值型：需要指定數(shù)值區(qū)間，如果沒有指定，將由系統(tǒng)自動計算從而確定計算數(shù)值范圍，坐標軸內(nèi)包含數(shù)值區(qū)間內(nèi)的全部坐標。（3）時間型：時間型坐標軸用法與數(shù)值型的非常相似，只是目標處理和格式化顯示時會自動轉(zhuǎn)變?yōu)闀r間，并且隨著時間跨度的不同而自動切換需要顯示的時間粒度，例如：時間跨度為一年，系統(tǒng)將自動顯示以月為單位的時間粒度；時間跨度為幾個小時，系統(tǒng)將自動顯示以分鐘為單位的時間粒度。直角坐標系下的坐標軸-1坐標軸組件的屬性如表所示。其中，某些選項僅對特定的類型有效，請注意適用類型。直角坐標系下的坐標軸-2坐標軸組件的屬性如表所示。其中，某些選項僅對特定的類型有效，請注意適用類型。直角坐標系下的坐標軸-3坐標軸組件的屬性如表所示。其中，某些選項僅對特定的類型有效，請注意適用類型。直角坐標系下的坐標軸-4坐標軸組件屬性示意圖如圖6-5所示。直角坐標系下的坐標軸-4坐標軸組件屬性示意圖如圖6-5所示。利用某一年的蒸發(fā)量、降水量、最低氣溫和最高氣溫數(shù)據(jù)繪制雙x軸和雙y軸的折柱混搭圖，并設(shè)置坐標軸的相關(guān)屬性，如圖所示。由圖可知，有上、下兩條橫軸，左、右兩條縱軸，并且下邊的橫軸中有一個數(shù)據(jù)項標簽較為突出，這是因為ECharts允許對個別標簽進行個性化定義，數(shù)組項可設(shè)置為一個對象，并使用子屬性textStyle設(shè)置個性化標簽。直角坐標系下的坐標軸【例6-2】舉例說明坐標軸組件使用。圖6-6左側(cè)的y軸代表某市月平均氣溫，右側(cè)的y軸表示某市降水量，x軸表示時間。兩組y軸在一起，反映了平均氣溫和降水量間的趨勢關(guān)系。直角坐標系下的坐標軸圖6-6坐標軸屬性設(shè)置6.2.4ECharts交互組件ECharts提供了很多交互組件：標題組件title圖例組件legend工具箱組件toolbox提示框組件tooltip視覺映射組件visualMap數(shù)據(jù)區(qū)域縮放組件dataZoom6.2.4ECharts交互組件1．標題組件title標題組件（title），顧名思義就是圖表的標題，它是ECharts中的一個比較簡單的組件。標題組件包含主標題和副標題。使用title標題需注意，在ECharts3以上中可以存在任意多個標題組件，這需要進行排版。6.2.4ECharts交互組件1．標題組件title標題組件（title），顧名思義就是圖表的標題，它是ECharts中的一個比較簡單的組件。標題組件包含主標題和副標題。使用title標題需注意，在ECharts3以上中可以存在任意多個標題組件，這需要進行排版。配置任意多個標題組件，這在需要對標題進行排版時，或單個實例中的多個圖表都需要標題時會比較有用，其中，標題（title）組件的屬性如下所示。6.2.4ECharts交互組件title:{show:"true",//是否顯示標題，默認顯示，可以不設(shè)置

text:"ECharts入門示例",//圖表標題文本內(nèi)容

link:"/",//點擊標題內(nèi)容要跳轉(zhuǎn)的鏈接

target:"blank",//跳轉(zhuǎn)鏈接打開方式，blank是新窗口打開，self是自身窗口打開，跟a標簽一樣subtext:"樹懶課堂",//副標題文本內(nèi)容，如果需要副標題就配置這一項

padding:5,//各個方向的內(nèi)邊距，默認是5，可以自行設(shè)置

itemGap:10,//主標題和副標題之間的距離，可自行設(shè)置

left:"center",//left的值可以是像20具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，也可以是'left','center','right',

top:"center",//top值同left的取值

right:"auto",//right的值可以是像20這樣的具體像素值，可以是像'20%'百分比。

bottom:"auto",//bottom的值可以是像20這樣的具體像素值，可以是像'20%'百分比。

backgroundColor:"#ccc",//標題背景色，默認透明，顏色可以使用RGB表示，比如'rgb(128,128,128)'，也可以使用十六進制格式

borderColor:"red",//標題的邊框顏色，顏色格式支持同backgroundColorborderWidth:2,//標題邊框線寬，默認為0，可自行設(shè)置

shadowBlur:10,//圖形陰影的模糊大小。該屬性配合shadowColor,shadowOffsetX,shadowOffsetY一起設(shè)置圖形的陰影效果。

shadowColor:"black",shadowOffsetX:0,shadowOffsetY:0,}標題組件屬性示意圖如圖所示。6.2.4ECharts交互組件--圖例組件2．圖例組件legend圖例（legend）組件是ECharts中較為常用的組件，它用于以不同的顏色區(qū)別系列標記的名字，表述了數(shù)據(jù)與圖形的關(guān)聯(lián)。用戶在操作時，可以通過單擊圖例控制哪些數(shù)據(jù)系列顯示或不顯示。為了完善整個圖表，需要配置和使用ECharts中圖例組件。圖例組件具有許多屬性。6.2.4ECharts交互組件--圖例組件legend={show:true, //是否顯示zlevel:0,//所屬圖形的Canvas分層，zlevel大的Canvas會放在zlevel小的Canvas的上面z:2, //所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋left:"center", //組件離容器左側(cè)的距離,'left','center','right','20%'top:"top", //組件離容器上側(cè)的距離,'top','middle','bottom','20%'right:"auto", //組件離容器右側(cè)的距離,'20%'bottom:"auto", //組件離容器下側(cè)的距離,'20%'width:"auto", //圖例寬度height:"auto", //圖例高度orient:"horizontal", //圖例排列方向align:"auto", //圖例標記和文本的對齊,left,rightpadding:5, //圖例內(nèi)邊距，單位px5[5,10][5,10,5,10]itemGap:10, //圖例每項之間的間隔itemWidth:25, //圖例標記的圖形寬度itemHeight:14, //圖例標記的圖形高度

6.2.4ECharts交互組件--圖例組件//formatter用來格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式formatter:'Legend{name}' //使用字符串模板，模板變量為圖例名稱{name}formatter:function(name){ //使用回調(diào)函數(shù)return'Legend'+name;}selectedMode:"single", //圖例選擇的模式,true開啟,false關(guān)閉,single單選,multiple多選inactiveColor:"#ccc", //圖例關(guān)閉時的顏色textStyle:mytextStyle, //文本樣式data:['類別1','類別2','類別3'], //series中的名稱backgroundColor:"transparent", //標題背景色borderColor:"#ccc", //邊框顏色borderWidth:0, //邊框線寬shadowColor:"red", //陰影顏色shadowOffsetX:0, //陰影水平方向上的偏移距離shadowOffsetY:0, //陰影垂直方向上的偏移距離shadowBlur:10, //陰影的模糊大小};6.2.4ECharts交互組件--圖例組件//formatter用來格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式formatter:'Legend{name}' //使用字符串模板，模板變量為圖例名稱{name}formatter:function(name){ //使用回調(diào)函數(shù)return'Legend'+name;}selectedMode:"single", //圖例選擇的模式,true開啟,false關(guān)閉,single單選,multiple多選inactiveColor:"#ccc", //圖例關(guān)閉時的顏色textStyle:mytextStyle, //文本樣式data:['類別1','類別2','類別3'], //series中的名稱backgroundColor:"transparent", //標題背景色borderColor:"#ccc", //邊框顏色borderWidth:0, //邊框線寬shadowColor:"red", //陰影顏色shadowOffsetX:0, //陰影水平方向上的偏移距離shadowOffsetY:0, //陰影垂直方向上的偏移距離shadowBlur:10, //陰影的模糊大小};6.2.4ECharts交互組件--圖例組件【例6-3】制作有2個系列的ECharts柱狀圖。對例6-1的商品銷售柱狀圖增加1月個系列數(shù)據(jù)，即包括1月和2月的銷售情況。同時在柱狀圖上方顯示1月銷量和2月銷量圖例，如圖6-7所示。6.2.4ECharts交互組件--工具箱組件ECharts中的工具箱（toolbox）組件功能非常強大，其內(nèi)置有6個子工具，包括導(dǎo)出圖片（saveAsImage）、重置（restore）、數(shù)據(jù)視圖（dataView）、數(shù)據(jù)區(qū)域縮放（dataZoom）、動態(tài)類型切換（magicType）和標記（mark）。工具箱組件中最主要的屬性是feature，這是工具箱組件的配置項，6個子工具的配置都需要在feature中實現(xiàn)。6.2.4ECharts交互組件--工具箱組件（1）導(dǎo)出圖片（saveAsImage）這個工具可以把圖表保存為圖片。常用的參數(shù)參數(shù)：type：保存圖片的格式，支持'png'和'jpeg'格式。name：保存文件的名字。backgroundColor：保存圖片的背景色。show：是否顯示該工具。6.2.4ECharts交互組件--工具箱組件saveAsImage:{//保存為圖片。

show:true,//是否顯示該工具。

type:"png",//保存的圖片格式。支持'png'和'jpeg'。

name:"pic1",//保存的文件名稱，默認使用title.text作為名稱

backgroundColor:"#ffffff",//保存的圖片背景色

title:"保存為圖片",pixelRatio:1//保存圖片的分辨率比例，默認跟容器相同大小，如果需要保存更高分辨率的，可以設(shè)置為大于1，例如2},6.2.4ECharts交互組件--工具箱組件（2）重置（restore）這個工具可以將配置項還原。主要參數(shù)屬性：show：是否顯示該工具。title：重置工具標題名。restore:{//配置項還原

show:true,//是否顯示該工具

title:"還原",//標題名},6.2.4ECharts交互組件--工具箱組件（3）數(shù)據(jù)視圖（dataView）數(shù)據(jù)視圖工具可以展現(xiàn)當前圖表所用的數(shù)據(jù)，編輯后可以動態(tài)更新。主要參數(shù)屬性：show：是否顯示該工具。readOnly：是否不可編輯（只讀）。backgroundColor：數(shù)據(jù)視圖浮層背景色。dataView:{//數(shù)據(jù)視圖工具，可以展現(xiàn)當前圖表所用的數(shù)據(jù)

show:true,//是否顯示該工具。

title:"數(shù)據(jù)視圖",readOnly:false,//可編輯

lang:['數(shù)據(jù)視圖','關(guān)閉','刷新'],//數(shù)據(jù)視圖上有三個按鈕文字backgroundColor:"#fff",//數(shù)據(jù)視圖浮層背景色。

textareaColor:"#fff",//數(shù)據(jù)視圖浮層文本輸入?yún)^(qū)背景色

textareaBorderColor:"#333",//數(shù)據(jù)視圖浮層文本輸入?yún)^(qū)邊框顏色

textColor:"#000",//文本顏色。

buttonColor:"#c23531",//按鈕顏色。

buttonTextColor:"#fff",//按鈕文本顏色。},6.2.4ECharts交互組件--工具箱組件（4）數(shù)據(jù)區(qū)域縮放（dataZoom）數(shù)據(jù)區(qū)域縮放工具目前只支持直角坐標系的縮放（這里的含義就是柱狀體，折線圖可以縮放，但是像餅狀圖就不能縮放）。主要參數(shù)屬性：show：是否顯示該工具。title：縮放和還原的標題文本。xAxisIndex：指定哪些xAxis被控制。如果缺省則控制所有的x軸。如果設(shè)置為false則不控制任何x軸。如果設(shè)置成3則控制axisIndex為3的x軸。如果設(shè)置為[0,3]則控制axisIndex為0和3的x軸。yAxisIndex：指定哪些yAxis被控制。如果缺省則控制所有的y軸。如果設(shè)置為false則不控制任何y軸。如果設(shè)置成3則控制axisIndex為3的y軸。如果設(shè)置為[0,3]則控制axisIndex為0和3的y軸6.2.4ECharts交互組件--工具箱組件（4）數(shù)據(jù)區(qū)域縮放（dataZoom）dataZoom:{//數(shù)據(jù)區(qū)域縮放

show:true,//是否顯示該工具。

title:"縮放",//縮放和還原的標題文本

xAxisIndex:0,//指定axisIndex為0的xAxis被控制。

yAxisIndex:false,//不控制任何y軸。},6.2.4ECharts交互組件--工具箱組件（5）動態(tài)類型切換（magicType）這個工具可以動態(tài)圖表類型切換。主要屬性：show：是否顯示該工具，type：數(shù)組，啟用的動態(tài)類型，包括'line'（切換為折線圖）,'bar'（切換為柱狀圖）,'stack'（切換為堆疊模式）,'tiled'（切換為平鋪模式）。magicType:{//動態(tài)類型切換

show:true,title:"切換",//各個類型的標題文本，可以分別配置。

type:['line','bar'],//啟用的動態(tài)類型，僅有折線圖和柱狀圖切換類型},6.2.4ECharts交互組件--工具箱組件（6）標記（mark）這個工具是輔助線開關(guān)。mark:{//輔助線開關(guān)

show:true},6.2.4ECharts交互組件--工具箱組件假如對工具箱組件進行如下配置：toolbox:{//配置工具箱組件

show:true,feature:{mark:{show:true},dataView:{show:true,readOnly:false},magicType:{show:true,type:['line','bar','stack','tiled']},restore:{show:true},saveAsImage:{show:true}}},以上工具箱組件配置效果如圖6.2.4ECharts交互組件--提示框組件4．提示框組件tooltip提示框（tooltip）組件又稱氣泡提示框組件或彈窗組件，也是一個功能比較強大的組件。當鼠標滑過圖表中的數(shù)據(jù)標簽時，會自動彈出一個小窗體，展現(xiàn)更詳細的數(shù)據(jù)。有時為了更友好地顯示數(shù)據(jù)內(nèi)容，還需要對顯示的數(shù)據(jù)內(nèi)容做格式化處理，或添加自定義內(nèi)容。提示框組件可以設(shè)置在多種地方：設(shè)置在全局，即tooltip設(shè)置在坐標系中，即grid.tooltip、polar.tooltip、single.tooltip設(shè)置在系列中，即series.tooltip設(shè)置在系列的每個數(shù)據(jù)項中，即series.data.tooltip6.2.4ECharts交互組件--提示框組件4．提示框組件tooltip（1）提示內(nèi)容文本設(shè)置：textStyle（2）提示框觸發(fā)方式：triggertooltip的trigger的值可以有'item'、'axis'。'item'：鼠標移到數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。'axis'：鼠標移到坐標軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。'none'，不觸發(fā)。6.2.4ECharts交互組件--提示框組件4．提示框組件tooltip（3）提示框觸發(fā)的條件：tooltip.triggerOntooltip的triggerOn的值可以有：'mousemove'：鼠標移動時觸發(fā)。'click'：鼠標點擊時觸發(fā)。'mousemove|click'：同時鼠標移動和單擊時觸發(fā)。'none'：不在'mousemove'或'click'時觸發(fā)，用戶可以通過action.tooltip.showTip和action.tooltip.hideTip來手動觸發(fā)和隱藏。也可以通過axisPointer.handle來觸發(fā)或隱藏。6.2.4ECharts交互組件--提示框組件4．提示框組件tooltip（4）提示框的格式：formatter提示框的格式主要分為兩種：字符串模板和回調(diào)函數(shù)。1）字符串模板模板變量有{a}，，{c}，666qy06，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。在trigger為'axis'的時候，會有多個系列的數(shù)據(jù)，此時可以通過{a0},{a1},{a2}這種后面加索引的方式表示系列的索引。2）自定義函數(shù)（回調(diào)函數(shù)）：回調(diào)函數(shù)格式：(params:Object|Array,ticket:string,callback:(ticket:string,html:string))=>string第一個參數(shù)params是formatter需要的數(shù)據(jù)集。6.2.4ECharts交互組件--提示框組件4．提示框組件tooltip（4）提示框的格式：formatter提示框的格式主要分為兩種：字符串模板和回調(diào)函數(shù)。1）字符串模板模板變量有{a}，，{c}，8osgoi0，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。在trigger為'axis'的時候，會有多個系列的數(shù)據(jù)，此時可以通過{a0},{a1},{a2}這種后面加索引的方式表示系列的索引。2）自定義函數(shù)（回調(diào)函數(shù)）：回調(diào)函數(shù)格式：(params:Object|Array,ticket:string,callback:(ticket:string,html:string))=>string第一個參數(shù)params是formatter需要的數(shù)據(jù)集。利用一周內(nèi)商家的收入數(shù)據(jù)繪制柱狀圖，并為圖表配置詳情提示框組件，如圖所示。由圖可知，在圖中，當鼠標指針滑過圖表中的數(shù)據(jù)標簽時，圖表中出現(xiàn)了更為詳細的信息。6.2.4ECharts交互組件--提示框組件6.2.4ECharts交互組件--視覺映射組件5．視覺映射組件visualMap視覺映射組件用于將數(shù)據(jù)映射到顏色、大小等視覺屬性上。ECharts的每種圖表本身就內(nèi)置了這種映射過程，之前學(xué)習(xí)到的柱形圖就是將數(shù)據(jù)映射到長度。此外，ECharts還提供了visualMap組件來提供通用的視覺映射。visualMap組件中可以使用的視覺元素有：圖形類別（symbol）圖形大?。╯ymbolSize）顏色（color）透明度（opacity）顏色透明度（colorAlpha）顏色明暗度（colorLightness）顏色飽和度（colorSaturation）色調(diào)（colorHue）映射效果6.2.4ECharts交互組件--數(shù)據(jù)區(qū)域縮放組件6．數(shù)據(jù)區(qū)域縮放組件DataZoom組件是數(shù)據(jù)區(qū)域縮放組件，用于控制圖表的數(shù)據(jù)范圍。下面介紹如何使用數(shù)據(jù)區(qū)域縮放組件dataZoom。圖6-12中下方灰色區(qū)域滑塊是數(shù)據(jù)區(qū)域縮放組件，通過拖動兩端可以縮放數(shù)據(jù)顯示區(qū)域范圍。通過設(shè)置dataZoom屬性來添加數(shù)據(jù)區(qū)域縮放組件。

dataZoom:[{//這個dataZoom組件，默認控制x軸。

type:'slider',//slider型dataZoom組件

start:10,//左邊在10%的位置。

end:60//右邊在60%的位置。

}],6.2.5ECharts標記點和標記線在一些折線圖或柱狀圖當中，可以經(jīng)?？吹綀D中對最高值和最低值進行了標記。在ECharts中，標記點（markPoint）常用于表示最高值和最低值等數(shù)據(jù)，而有些圖表中會有一個平行于x軸的、表示平均值等數(shù)據(jù)的虛線。在ECharts中，標記線（markLine）常用于展示平均值等。為了更好地觀察數(shù)據(jù)中的最高值、最低值和平均值等數(shù)據(jù)，需要在圖表中配置和使用標記點與標記線。在ECharts中，標記點有最大值、最小值、平均值的標記點，也可以是任意位置上的標記點，它需要在series字段下進行配置。標記點的各種屬性如表所示。標記點ECharts中的標記線是一條平行于x軸的水平線，有最大值、最小值、平均值等數(shù)據(jù)的標記線，它也是在series字段下進行配置的。標記線的各種屬性如表所示。標記線【例6-4】利用某商場商品的銷量數(shù)據(jù)繪制柱狀圖，并利用標記點和標記線標記出數(shù)據(jù)中的最大值、最小值和平均值，如圖所示。從圖可以看出，圖表中利用標記點標記出了數(shù)據(jù)中的最小值為15，最大值為100，并利用標記線標記出了數(shù)據(jù)中的平均值為53.5。標記線【例6-4】利用某商場商品的銷量數(shù)據(jù)繪制柱狀圖，并利用標記點和標記線標記出數(shù)據(jù)中的最大值、最小值和平均值，如圖所示。從圖可以看出，圖表中利用標記點標記出了數(shù)據(jù)中的最小值為15，最大值為100，并利用標記線標記出了數(shù)據(jù)中的平均值為53.5。標記線6.3ECharts數(shù)據(jù)集ECharts可以使用數(shù)據(jù)集（dataset）管理數(shù)據(jù)。數(shù)據(jù)集用于數(shù)據(jù)單獨聲明，從而數(shù)據(jù)可以單獨管理，被多個組件復(fù)用。6.3.1數(shù)據(jù)集的使用varoption={xAxis:{type:'category',data:['咖啡','茶葉','面包','巧克力']},yAxis:{},series:[{type:'bar',name:'2020',data:[89.3,92.1,94.4,85.4]