第echarts交互組件與數(shù)據(jù)的視覺(jué)映射ECharts提供了很多交互組件：例組件legend、標(biāo)題組件title、視覺(jué)映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom、時(shí)間線組件timeline。

接下來(lái)的內(nèi)容我們將介紹如何使用數(shù)據(jù)區(qū)域縮放組件dataZoom。

dataZoom

dataZoom組件可以實(shí)現(xiàn)通過(guò)鼠標(biāo)滾輪滾動(dòng)，放大縮小圖表的功能。

默認(rèn)情況下dataZoom控制x軸，即對(duì)x軸進(jìn)行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。

option={

xAxis:{

type:'value'

yAxis:{

type:'value'

dataZoom:[

{//這個(gè)dataZoom組件，默認(rèn)控制x軸。

type:'slider',//這個(gè)dataZoom組件是slider型dataZoom組件

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

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

series:[

type:'scatter',//這是個(gè)『散點(diǎn)圖』

itemStyle:{

opacity:0.8

symbolSize:function(val){

returnval[2]*40;

data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]

}

上面的實(shí)例只能拖動(dòng)dataZoom組件來(lái)縮小或放大圖表。如果想在坐標(biāo)系內(nèi)進(jìn)行拖動(dòng)，以及用鼠標(biāo)滾輪（或移動(dòng)觸屏上的兩指滑動(dòng)）進(jìn)行縮放，那么需要再再加上一個(gè)inside型的dataZoom組件。

在以上實(shí)例基礎(chǔ)上我們?cè)僭黾觮ype:inside的配置信息：

option={

...,

dataZoom:[

{//這個(gè)dataZoom組件，默認(rèn)控制x軸。

type:'slider',//這個(gè)dataZoom組件是slider型dataZoom組件

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

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

{//這個(gè)dataZoom組件，也控制x軸。

type:'inside',//這個(gè)dataZoom組件是inside型dataZoom組件

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

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

}

當(dāng)然我們可以通過(guò)dataZoom.xAxisIndex或dataZoom.yAxisIndex來(lái)指定dataZoom控制哪個(gè)或哪些數(shù)軸。

vardata1=[];

vardata2=[];

vardata3=[];

varrandom=function(max){

return(Math.random()*max).toFixed(3);

for(vari=0;i500;i++){

data1.push([random(15),random(10),random(1)]);

data2.push([random(10),random(10),random(1)]);

data3.push([random(15),random(10),random(1)]);

option={

animation:false,

legend:{

data:['scatter','scatter2','scatter3']

tooltip:{

xAxis:{

type:'value',

min:'dataMin',

max:'dataMax',

splitLine:{

show:true

yAxis:{

type:'value',

min:'dataMin',

max:'dataMax',

splitLine:{

show:true

dataZoom:[

type:'slider',

show:true,

xAxisIndex:[0],

start:1,

end:35

type:'slider',

show:true,

yAxisIndex:[0],

left:'93%',

start:29,

end:36

type:'inside',

xAxisIndex:[0],

start:1,

end:35

type:'inside',

yAxisIndex:[0],

start:29,

end:36

series:[

name:'scatter',

type:'scatter',

itemStyle:{

normal:{

opacity:0.8

symbolSize:function(val){

returnval[2]*40;

data:data1

name:'scatter2',

type:'scatter',

itemStyle:{

normal:{

opacity:0.8

symbolSize:function(val){

returnval[2]*40;

data:data2

name:'scatter3',

type:'scatter',

itemStyle:{

normal:{

opacity:0.8,

symbolSize:function(val){

returnval[2]*40;

data:data3

}

數(shù)據(jù)的視覺(jué)映射

數(shù)據(jù)可視化簡(jiǎn)單來(lái)講就是將數(shù)據(jù)用圖表的形式來(lái)展示，專(zhuān)業(yè)的表達(dá)方式就是數(shù)據(jù)到視覺(jué)元素的映射過(guò)程。

ECharts的每種圖表本身就內(nèi)置了這種映射過(guò)程，我們之前學(xué)習(xí)到的柱形圖就是將數(shù)據(jù)映射到長(zhǎng)度。

此外，ECharts還提供了visualMap組件來(lái)提供通用的視覺(jué)映射。visualMap組件中可以使用的視覺(jué)元素有：

圖形類(lèi)別（symbol）圖形大?。╯ymbolSize）顏色（color）透明度（opacity）顏色透明度（colorAlpha）顏色明暗度（colorLightness）顏色飽和度（colorSaturation）色調(diào)（colorHue）

一、數(shù)據(jù)和維度

ECharts中的數(shù)據(jù)，一般存放于series.data中。

不同的圖表類(lèi)型，數(shù)據(jù)格式有所不一樣，但是他們的共同特點(diǎn)就都是數(shù)據(jù)項(xiàng)（dataItem）的集合。每個(gè)數(shù)據(jù)項(xiàng)含有數(shù)據(jù)值（value）和其他信息（可選）。每個(gè)數(shù)據(jù)值，可以是單一的數(shù)值（一維）或者一個(gè)數(shù)組（多維）。

series.data最常見(jiàn)的形式是線性表，即一個(gè)普通數(shù)組：

series:{

data:[

{//這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）

value:2323,//這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）

itemStyle:{...}

1212,//也可以直接是dataItem的value，這更常見(jiàn)。

2323,//每個(gè)value都是『一維』的。

4343,

3434

series:{

data:[

{//這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）

value:[3434,129,'圣馬力諾'],//這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）

itemStyle:{...}

[1212,5454,'梵蒂岡'],//也可以直接是dataItem的value，這更常見(jiàn)。

[2323,3223,'瑙魯'],//每個(gè)value都是『三維』的，每列是一個(gè)維度。

[4343,23,'圖瓦盧']//假如是『氣泡圖』，常見(jiàn)第一維度映射到x軸，

//第二維度映射到y(tǒng)軸，

//第三維度映射到氣泡半徑（symbolSize）

}

在圖表中，往往默認(rèn)把value的前一兩個(gè)維度進(jìn)行映射，比如取第一個(gè)維度映射到x軸，取第二個(gè)維度映射到y(tǒng)軸。如果想要把更多的維度展現(xiàn)出來(lái)，可以借助visualMap。

二、visualMap組件

visualMap組件定義了把數(shù)據(jù)的指定維度映射到對(duì)應(yīng)的視覺(jué)元素上。

visualMap組件可以定義多個(gè)，從而可以同時(shí)對(duì)數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺(jué)映射。

visualMap組件可以定義為分段型（visualMapPiecewise）或連續(xù)型（visualMapContinuous），通過(guò)type來(lái)區(qū)分。例如：

option={

visualMap:[

{//第一個(gè)visualMap組件

type:'continuous',//定義為連續(xù)型visualMap

{//第二個(gè)visualMap組件

type:'piecewise',//定義為分段型visualMap

};

分段型視覺(jué)映射組件，有三種模式：

連續(xù)型數(shù)據(jù)平均分段:依據(jù)visualMap-piecewise.splitNumber來(lái)自動(dòng)平均分割成若干塊。連續(xù)型數(shù)據(jù)自定義分段:依據(jù)visualMap-piecewise.pieces來(lái)定義每塊范圍。離散數(shù)據(jù)根據(jù)類(lèi)別分段:類(lèi)別定義在visualMap-piecewise.categories中。

分段型視覺(jué)映射組件，展現(xiàn)形式如下圖：

!DOCTYPEhtml

html

head

metacharset="utf-8"

/head

body

divid="container"/div

scripttype="text/javascript"src="/npm/echarts/dist/echarts.min.js"/script

scripttype="text/javascript"src="/npm/echarts-gl/dist/echarts-gl.min.js"/script

scripttype="text/javascript"src="/npm/echarts-stat/dist/ecStat.min.js"/script

scripttype="text/javascript"src="/npm/echarts/dist/extension/dataTool.min.js"/script

scripttype="text/javascript"src="/npm/echarts/map/js/china.js"/script

scripttype="text/javascript"src="/npm/echarts/map/js/world.js"/script

scripttype="text/javascript"src="/npm/echarts/dist/extension/bmap.min.js"/script

scripttype="text/javascript"

vardom=document.getElementById("container");

varmyChart=echarts.init(dom);

varapp={};

option=null;

vargeoCoordMap={

"海門(mén)":[121.15,31.89],

"鄂爾多斯":[109.781327,39.608266],

"招遠(yuǎn)":[120.38,37.35],

"舟山":[122.207216,29.985295],

"齊齊哈爾":[123.97,47.33],

"鹽城":[120.13,33.38],

"赤峰":[118.87,42.28],

"青島":[120.33,36.07],

"乳山":[121.52,36.89],

"金昌":[102.188043,38.520089],

"泉州":[118.58,24.93],

"萊西":[120.53,36.86],

"日照":[119.46,35.42],

"膠南":[119.97,35.88],

"南通":[121.05,32.08],

"拉薩":[91.11,29.97],

"云浮":[112.02,22.93],

"梅州":[116.1,24.55],

"文登":[122.05,37.2],

"上海":[121.48,31.22],

"攀枝花":[101.718637,26.582347],

"威海":[122.1,37.5],

"承德":[117.93,40.97],

"廈門(mén)":[118.1,24.46],

"汕尾":[115.375279,22.786211],

"潮州":[116.63,23.68],

"丹東":[124.37,40.13],

"太倉(cāng)":[121.1,31.45],

"曲靖":[103.79,25.51],

"煙臺(tái)":[121.39,37.52],

"福州":[119.3,26.08],

"瓦房店":[121.979603,39.627114],

"即墨":[120.45,36.38],

"撫順":[123.97,41.97],

"玉溪":[102.52,24.35],

"張家口":[114.87,40.82],

"陽(yáng)泉":[113.57,37.85],

"萊州":[119.942327,37.177017],

"湖州":[120.1,30.86],

"汕頭":[116.69,23.39],

"昆山":[120.95,31.39],

"寧波":[121.56,29.86],

"湛江":[110.359377,21.270708],

"揭陽(yáng)":[116.35,23.55],

"榮成":[122.41,37.16],

"連云港":[119.16,34.59],

"葫蘆島":[120.836932,40.711052],

"常熟":[120.74,31.64],

"東莞":[113.75,23.04],

"河源":[114.68,23.73],

"淮安":[119.15,33.5],

"泰州":[119.9,32.49],

"南寧":[108.33,22.84],

"營(yíng)口":[122.18,40.65],

"惠州":[114.4,23.09],

"江陰":[120.26,31.91],

"蓬萊":[120.75,37.8],

"韶關(guān)":[113.62,24.84],

"嘉峪關(guān)":[98.289152,39.77313],

"廣州":[113.23,23.16],

"延安":[109.47,36.6],

"太原":[112.53,37.87],

"清遠(yuǎn)":[113.01,23.7],

"中山":[113.38,22.52],

"昆明":[102.73,25.04],

"壽光":[118.73,36.86],

"盤(pán)錦":[122.070714,41.119997],

"長(zhǎng)治":[113.08,36.18],

"深圳":[114.07,22.62],

"珠海":[113.52,22.3],

"宿遷":[118.3,33.96],

"咸陽(yáng)":[108.72,34.36],

"銅川":[109.11,35.09],

"平度":[119.97,36.77],

"佛山":[113.11,23.05],

"?？?:[110.35,20.02],

"江門(mén)":[113.06,22.61],

"章丘":[117.53,36.72],

"肇慶":[112.44,23.05],

"大連":[121.62,38.92],

"臨汾":[111.5,36.08],

"吳江":[120.63,31.16],

"石嘴山":[106.39,39.04],

"沈陽(yáng)":[123.38,41.8],

"蘇州":[120.62,31.32],

"茂名":[110.88,21.68],

"嘉興":[120.76,30.77],

"長(zhǎng)春":[125.35,43.88],

"膠州":[120.03336,36.264622],

"銀川":[106.27,38.47],

"張家港":[120.555821,31.875428],

"三門(mén)峽":[111.19,34.76],

"錦州":[121.15,41.13],

"南昌":[115.89,28.68],

"柳州":[109.4,24.33],

"三亞":[109.511909,18.252847],

"自貢":[104.778442,29.33903],

"吉林":[126.57,43.87],

"陽(yáng)江":[111.95,21.85],

"瀘州":[105.39,28.91],

"西寧":[101.74,36.56],

"宜賓":[104.56,29.77],

"呼和浩特":[111.65,40.82],

"成都":[104.06,30.67],

"大同":[113.3,40.12],

"鎮(zhèn)江":[119.44,32.2],

"桂林":[110.28,25.29],

"張家界":[110.479191,29.117096],

"宜興":[119.82,31.36],

"北海":[109.12,21.49],

"西安":[108.95,34.27],

"金壇":[119.56,31.74],

"東營(yíng)":[118.49,37.46],

"牡丹江":[129.58,44.6],

"遵義":[106.9,27.7],

"紹興":[120.58,30.01],

"揚(yáng)州":[119.42,32.39],

"常州":[119.95,31.79],

"濰坊":[119.1,36.62],

"重慶":[106.54,29.59],

"臺(tái)州":[121.420757,28.656386],

"南京":[118.78,32.04],

"濱州":[118.03,37.36],

"貴陽(yáng)":[106.71,26.57],

"無(wú)錫":[120.29,31.59],

"本溪":[123.73,41.3],

"克拉瑪依":[84.77,45.59],

"渭南":[109.5,34.52],

"馬鞍山":[118.48,31.56],

"寶雞":[107.15,34.38],

"焦作":[113.21,35.24],

"句容":[119.16,31.95],

"北京":[116.46,39.92],

"徐州":[117.2,34.26],

"衡水":[115.72,37.72],

"包頭":[110,40.58],

"綿陽(yáng)":[104.73,31.48],

"烏魯木齊":[87.68,43.77],

"棗莊":[117.57,34.86],

"杭州":[120.19,30.26],

"淄博":[118.05,36.78],

"鞍山":[122.85,41.12],

"溧陽(yáng)":[119.48,31.43],

"庫(kù)爾勒":[86.06,41.68],

"安陽(yáng)":[114.35,36.1],

"開(kāi)封":[114.35,34.79],

"濟(jì)南":[117,36.65],

"德陽(yáng)":[104.37,31.13],

"溫州":[120.65,28.01],

"九江":[115.97,29.71],

"邯鄲":[114.47,36.6],

"臨安":[119.72,30.23],

"蘭州":[103.73,36.03],

"滄州":[116.83,38.33],

"臨沂":[118.35,35.05],

"南充":[106.110698,30.837793],

"天津":[117.2,39.13],

"富陽(yáng)":[119.95,30.07],

"泰安":[117.13,36.18],

"諸暨":[120.23,29.71],

"鄭州":[113.65,34.76],

"哈爾濱":[126.63,45.75],

"聊城":[115.97,36.45],

"蕪湖":[118.38,31.33],

"唐山":[118.02,39.63],

"平頂山":[113.29,33.75],

"邢臺(tái)":[114.48,37.05],

"德州":[116.29,37.45],

"濟(jì)寧":[116.59,35.38],

"荊州":[112.239741,30.335165],

"宜昌":[111.3,30.7],

"義烏":[120.06,29.32],

"麗水":[119.92,28.45],

"洛陽(yáng)":[112.44,34.7],

"秦皇島":[119.57,39.95],

"株洲":[113.16,27.83],

"石家莊":[114.48,38.03],

"萊蕪":[117.67,36.19],

"常德":[111.69,29.05],

"保定":[115.48,38.85],

"湘潭":[112.91,27.87],

"金華":[119.64,29.12],

"岳陽(yáng)":[113.09,29.37],

"長(zhǎng)沙":[113,28.21],

"衢州":[118.88,28.97],

"廊坊":[116.7,39.53],

"菏澤":[115.480656,35.23375],

"合肥":[117.27,31.86],

"武漢":[114.31,30.52],

"大慶":[125.03,46.58]

varconvertData=function(data){

varres=[];

for(vari=0;idata.length;i++){

vargeoCoord=geoCoordMap[data[i].name];

if(geoCoord){

res.push(geoCoord.concat(data[i].value));

returnres;

option={

backgroundColor:'#404a59',

title:{

text:'全國(guó)主要城市空氣質(zhì)量',

subtext:'datafromPM25.in',

sublink:'http://www.pm25.in',

left:'center',

textStyle:{

color:'#fff'

tooltip:{

trigger:'item'

legend:{

orient:'vertical',

top:'bottom',

left:'right',

data:['pm2.5'],

textStyle:{

color:'#fff'

visualMap:{

min:0,

max:300,

splitNumber:5,

color:['#d94e5d','#eac736','#50a3ba'],

textStyle:{

color:'#fff'

geo:{

map:'china',

label:{

emphasis:{

show:false

itemStyle:{

normal:{

areaColor:'#323c48',

borderColor:'#111'

emphasis:{

areaColor:'#2a333d'

series:[

name:'pm2.5',

type:'scatter',

coordinateSystem:'geo',

data:convertData([

{name:"海門(mén)",value:9},

{name:"鄂爾多斯",value:12},

{name:"招遠(yuǎn)",value:12},

{name:"舟山",value:12},

{name:"齊齊哈爾",value:14},

{name:"鹽城",value:15},

{name:"赤峰",value:16},

{name:"青島",value:18},

{name:"乳山",value:18},

{name:"金昌",value:19},

{name:"泉州",value:21},

{name:"萊西",value:21},

{name:"日照",value:21},

{name:"膠南",value:22},

{name:"南通",value:23},

{name:"拉薩",value:24},

{name:"云浮",value:24},

{name:"梅州",value:25},

{name:"文登",value:25},

{name:"上海",value:25},

{name:"攀枝花",value:25},

{name:"威海",value:25},

{name:"承德",value:25},

{name:"廈門(mén)",value:26},

{name:"汕尾",value:26},

{name:"潮州",value:26},

{name:"丹東",value:27},

{name:"太倉(cāng)",value:27},

{name:"曲靖",value:27},

{name:"煙臺(tái)",value:28},

{name:"福州",value:29},

{name:"瓦房店",value:30},

{name:"即墨",value:30},

{name:"撫順",value:31},

{name:"玉溪",value:31},

{name:"張家口",value:31},

{name:"陽(yáng)泉",value:31},

{name:"萊州",value:32},

{name:"湖州",value:32},

{name:"汕頭",value:32},

{name:"昆山",value:33},

{name:"寧波",value:33},

{name:"湛江",value:33},

{name:"揭陽(yáng)",value:34},

{name:"榮成",value:34},

{name:"連云港",value:35},

{name:"葫蘆島",value:35},

{name:"常熟",value:36},

{name:"東莞",value:36},

{name:"河源",value:36},

{name:"淮安",value:36},

{name:"泰州",value:36},

{name:"南寧",value:37},

{name:"營(yíng)口",value:37},

{name:"惠州",value:37},

{name:"江陰",value:37},

{name:"蓬萊",value:37},

{name:"韶關(guān)",value:38},

{name:"嘉峪關(guān)",value:38},

{name:"廣州",value:38},

{name:"延安",value:38},

{name:"太原",value:39},

{name:"清遠(yuǎn)",value:39},

{name:"中山",value:39},

{name:"昆明",value:39},

{name:"壽光",value:40},

{name:"盤(pán)錦",value:40},

{name:"長(zhǎng)治",value:41},

{name:"深圳",value:41},

{name:"珠海",value:42},

{name:"宿遷",value:43},

{name:"咸陽(yáng)",value:43},

{name:"銅川",value:44},

{name:"平度",value:44},

{name:"佛山",value:44},

{name:"?？?,value:44},

{name:"江門(mén)",value:45},

{name:"章丘",value:45},

{name:"肇慶",value:46},

{name:"大連",value:47},

{name:"臨汾",value:47},

{name:"吳江",value:47},

{name:"石嘴山",value:49},

{name:"沈陽(yáng)",value:50},

{name:"蘇州",value:50},

{name:"茂名",value:50},

{name:"嘉興",value:51},

{name:"長(zhǎng)春",value:51},

{name:"膠州",value:52},

{name:"銀川",value:52},

{name:"張家港",value:52},

{name:"三門(mén)峽",value:53},

{name:"錦州",value:54},

{name:"南昌",value:54},

{name:"柳州",value:54},

{name:"三亞",value:54},

{name:"自貢",value:56},

{name:"吉林",value:56},

{name:"陽(yáng)江",value:57},

{name:"瀘州",value:57},

{name:"西寧",value:57},

{name:"宜賓",value:58},

{name:"呼和浩特",value:58},

{name:"成都",value:58},

{name:"大同",value:58},

{name:"鎮(zhèn)江",value:59},

{name:"桂林",value:59},

{name:"張家界",value:59},

{name:"宜興",value:59},

{name:"北海",value:60},

{name:"西安",value:61},

{name:"金壇",value:62},

{name:"東營(yíng)",value:62},

{name:"牡丹江",value:63},

{name:"遵義",value:63},

{name:"紹興",value:63},

{name:"揚(yáng)州",value:64},

{name:"常州",value:64},

{name:"濰坊",value:65},

{name:"重慶",value:66},

{name:"臺(tái)州",value:67},

{name:"南京",value:67},

{name:"濱州",value:70},

{name:"貴陽(yáng)",value:71},

{name:"無(wú)錫",value:71},

{name:"本溪",value:71},

{name:"克拉瑪依",value:72},

{name:"渭南",value:72},

{name:"馬鞍山",value:72},

{name:"寶雞",value:72},

{name:"焦作",value:75},

{name:"句容",value:75},

{name:"北京",value:79},

{name:"徐州",value:79},

{name:"衡水",value:80},

{name:"包頭",value:80},

{name:"綿陽(yáng)",value:80},

{name:"烏魯木齊",value:84},

{name:"棗莊",value:84},

{name:"杭州",value:84},

{name:"淄博",value:85},

{name:"鞍山",value:86},

{name:"溧陽(yáng)",value:86},

{name:"庫(kù)爾勒",value:86},

{name:"安陽(yáng)",value:90},

{name:"開(kāi)封",value:90},

{name:"濟(jì)南",value:92},

{name:"德陽(yáng)",value:93},

{name:"溫州",value:95},

{name:"九江",value:96},

{name:"邯鄲",value:98},

{name:"臨安",value:99},

{name:"蘭州",value:99},

{name:"滄州",value:100},

{name:"臨沂",value:103},

{name:"南充",value:104},

{name:"天津",value:105},

{name:"富陽(yáng)",value:106},

{name:"泰安",value:112},

{name:"諸暨",value:112},

{name:"鄭州",value:113},

{name:"哈爾濱",value:114},

{name:"聊城",value:116},

{name:"蕪湖",value:117},

{name:"唐山",value:119},