Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.4設(shè)置ECharts圖表的樣式2.4.1設(shè)置顏色主題最簡(jiǎn)單的更改全局樣式的方式是直接采用顏色主題（theme）。ECharts5.x除了默認(rèn)主題，還內(nèi)置了'dark'主題，可以直接進(jìn)行切換：varchart=echarts.init(dom,'dark');其他沒有內(nèi)置在ECharts中的主題，需要用戶自行加載。這些主題可以在主題編輯器里獲取，也可以使用主題編輯器自行編輯主題。下載下來的主題的使用方式如下。如果主題保存為JSON文件，則需要自行加載和注冊(cè)。2.4.1設(shè)置顏色主題【示例代碼2-10】fetch('theme/vintage.json').then(r=>r.json()).then(theme=>{echarts.registerTheme('vintage',theme);varchart=echarts.init(dom,'vintage');})如果保存為UMD格式的JavaScript文件，文件內(nèi)部已經(jīng)做了自注冊(cè)，直接引入JavaScript文件即可：varchart=echarts.init(dom,'vintage');2.4.2設(shè)置調(diào)色盤可以在option中設(shè)置調(diào)色盤，它給定了一組顏色，圖形、系列會(huì)自動(dòng)從中選擇顏色?？梢栽O(shè)置全局的調(diào)色盤，也可以設(shè)置系列專屬的調(diào)色盤。2.4.3直接設(shè)置圖形元素的樣式直接的樣式設(shè)置是比較常用的樣式設(shè)置方式?？v觀ECharts的option，很多地方可以設(shè)置itemStyle、lineStyle、areaStyle、label等。這些地方可以直接設(shè)置圖形元素的顏色、線寬、點(diǎn)的大小、標(biāo)簽的文字、標(biāo)簽的樣式等。一般來說，ECharts的各個(gè)系列和組件都遵從這些命名習(xí)慣，雖然在不同圖表和組件中，itemStyle、label等可能出現(xiàn)在不同的地方。2.4.4通過emphasis屬性定制高亮的樣式鼠標(biāo)指針懸停在圖形元素上時(shí)，一般會(huì)出現(xiàn)高亮的樣式。默認(rèn)情況下，高亮的樣式是根據(jù)普通樣式自動(dòng)生成的，但也可以通過emphasis屬性來定制。emphasis的結(jié)構(gòu)和普通樣式的結(jié)構(gòu)相同。2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】option={series:{type:'scatter',itemStyle:{color:'red'},label:{show:true,formatter:'Thisisanormallabel.'},2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】emphasis:{itemStyle:{color:'blue'},label:{show:true,formatter:'Thisisaemphasislabel.'}}}};2.4.5數(shù)據(jù)的視覺映射數(shù)據(jù)可視化是數(shù)據(jù)到視覺元素的映射過程，這個(gè)過程也可稱為視覺編碼，視覺元素也可稱為視覺通道。ECharts的每種圖表都內(nèi)置了這種映射過程，如折線圖把數(shù)據(jù)映射到“線”，柱狀圖把數(shù)據(jù)映射到“長(zhǎng)度”。一些更復(fù)雜的圖表（如關(guān)系圖、事件河流圖、樹圖）也都會(huì)進(jìn)行各自內(nèi)置的映射。2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度ECharts中的數(shù)據(jù)一般存放于series.data中。圖表類型不同，數(shù)據(jù)的具體形式可能有些許差異，但它們都是數(shù)據(jù)項(xiàng)（dataItem）的集合。每個(gè)數(shù)據(jù)項(xiàng)含有數(shù)據(jù)值（value）和其他信息（如果需要的話）。每個(gè)數(shù)據(jù)值可以是單一的數(shù)值（一維）或者一個(gè)數(shù)組（多維）。例如，series.data最常見的形式是“線性表”，即一個(gè)普通數(shù)組。2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度【示例代碼2-13】series:{data:[{value:3.4,itemStyle:{}},4.2,10.8,7.2,];}2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度series:{data:[{value:[3.4,4.5,15],itemStyle:{}},[4.2,2.3,20],[10.8,9.5,30],[7.2,8.8,18]];}2.4.5數(shù)據(jù)的視覺映射1．?dāng)?shù)據(jù)和維度在圖表中，往往默認(rèn)把value的前一兩個(gè)維度進(jìn)行映射，如將第1個(gè)維度映射到x軸，將第2個(gè)維度映射到y(tǒng)軸。如果要把更多的維度展現(xiàn)出來，可以借助visualMap。常見的情況是，散點(diǎn)圖使用半徑展現(xiàn)第3個(gè)維度。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件ECharts的視覺映射組件分為連續(xù)型（visualMapContinuous）與分段型（visualMapPiecewise）。連續(xù)型的意思是進(jìn)行視覺映射的數(shù)據(jù)維度是連續(xù)的數(shù)值，分段型則指數(shù)據(jù)被分成了多段或者是離散型的數(shù)據(jù)。（1）連續(xù)型視覺映射組件連續(xù)型視覺映射組件通過指定最大值、最小值，就可以確定視覺映射的范圍。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件【示例代碼2-14】option={visualMap:[{type:'continuous',min:0,max:5000,dimension:3,seriesIndex:4,inRange:{color:['blue','#121122','red'],symbolSize:[30,100]},outOfRange:{symbolSize:[30,100]}}]};2.4.5數(shù)據(jù)的視覺映射其中，visualMap.inRange表示在數(shù)據(jù)映射范圍內(nèi)的數(shù)據(jù)采用的樣式，visualMap.outOfRange指定了超出映射范圍的數(shù)據(jù)的樣式，visualMap.dimension則指定了將數(shù)據(jù)的哪個(gè)維度做視覺映射。2.4.5數(shù)據(jù)的視覺映射（2）分段型視覺映射組件分段型視覺映射組件有以下3種模式。①連續(xù)型數(shù)據(jù)平均分段：依據(jù)visualMap-piecewise.splitNumbe將數(shù)據(jù)自動(dòng)平均分割成若干段。②連續(xù)型數(shù)據(jù)自定義分段：依據(jù)visualMap-pie