1.?Title

mytextStyle={

????color:"#333", ??????????????????????????//文字顏色

????fontStyle:"normal", ????????????????????//italic斜體 ?oblique傾斜

????fontWeight:"normal", ???????????????????//文字粗細(xì)bold ??bolder ??lighter ?100 | 200 | 300 | 400...

????fontFamily:"sans-serif", ???????????????//字體系列

????fontSize:18, ?????????????????????????????//字體大小

};

?

title={

????show:true, ????????????????????????????????//是否顯示

????text:"大標(biāo)題", ????????????????????????????//大標(biāo)題

????subtext:"小標(biāo)題", ?????????????????????????//小標(biāo)題

????sublink:"http://www.baidu.com", ?????????//小標(biāo)題鏈接

????target:"blank", ???????????????????????????//'self' 當(dāng)前窗口打開，'blank' 新窗口打開

????subtarget:"blank", ???????????????????????//小標(biāo)題打開鏈接的窗口

????textAlign:"center", ??????????????????????//文本水平對齊

????textBaseline:"top", ??????????????????????//文本垂直對齊

????textStyle:mytextStyle, ????????????????????//標(biāo)題樣式

????subtextStyle:mytextStyle, ????????????????//小標(biāo)題樣式

????padding:5, ?????????????????????????????????//標(biāo)題內(nèi)邊距 5 ?[5, 10] ?[5,10,5,10]

????itemGap:10, ????????????????????????????????//大小標(biāo)題間距

????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%'

????backgroundColor:"transparent", ???????????//標(biāo)題背景色

????borderColor:"#ccc", ????????????????????????//邊框顏色

????borderWidth:0, ??????????????????????????????//邊框線寬

????shadowColor:"red", ?????????????????????????//陰影顏色

????shadowOffsetX:0, ???????????????????????????//陰影水平方向上的偏移距離

????shadowOffsetY:0, ???????????????????????????//陰影垂直方向上的偏移距離

????shadowBlur:10, ??????????????????????????????//陰影的模糊大小

};

?

2.tooltip的配置參數(shù)

tooltip ={//提示框組件

????trigger: 'item', ???????????????????????????//觸發(fā)類型,'item'數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。

????triggerOn:"mousemove", ?????????????????????//提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動時觸發(fā)。'click'鼠標(biāo)點擊時觸發(fā)。'mousemove|click'同時鼠標(biāo)移動和點擊時觸發(fā)。'none'不在 'mousemove' 或 'click' 時觸發(fā)

????showContent:true, ??????????????????????????//是否顯示提示框浮層

????alwaysShowContent:true, ????????????????????//是否永遠(yuǎn)顯示提示框內(nèi)容

????showDelay:0, ?????????????????????????????????//浮層顯示的延遲，單位為 ms

????hideDelay:100, ???????????????????????????????//浮層隱藏的延遲，單位為 ms

????enterable:false, ????????????????????????????//鼠標(biāo)是否可進(jìn)入提示框浮層中

????confine:false, ??????????????????????????????//是否將 tooltip 框限制在圖表的區(qū)域內(nèi)

????transitionDuration:0.4, ?????????????????????//提示框浮層的移動動畫過渡時間，單位是 s,設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動

????position:['50%', '50%'], ???????????????????//提示框浮層的位置，默認(rèn)不設(shè)置時位置會跟隨鼠標(biāo)的位置,[10, 10],回掉函數(shù)，inside鼠標(biāo)所在圖形的內(nèi)部中心位置，top、left、bottom、right鼠標(biāo)所在圖形上側(cè)，左側(cè)，下側(cè)，右側(cè)，

????formatter:"{b0}: {c0}<br />{b1}: {c1}", ????//提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式,模板變量有 {a}, {b}，{c}，ozvdkddzhkzd，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等

????backgroundColor:"transparent", ???????????//標(biāo)題背景色

????borderColor:"#ccc", ???????????????????????//邊框顏色

????borderWidth:0, ?????????????????????????????//邊框線寬

????padding:5, ?????????????????????????????????//圖例內(nèi)邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]

????textStyle:mytextStyle, ????????????????????//文本樣式

};

3.lengend圖例

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", ??????????????????????????????//圖例標(biāo)記和文本的對齊,left,right

????padding:5, ??????????????????????????????????//圖例內(nèi)邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]

????itemGap:10, ?????????????????????????????????//圖例每項之間的間隔

????itemWidth:25, ??????????????????????????????//圖例標(biāo)記的圖形寬度

????itemHeight:14, ?????????????????????????????//圖例標(biāo)記的圖形高度

????formatter:function (name) { ????????????????//用來格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式。模板變量為圖例名稱 {name}

????????return 'Legend ' + name;

????},

????selectedMode:"single", ???????????????????//圖例選擇的模式,true開啟,false關(guān)閉,single單選,multiple多選

????inactiveColor:"#ccc", ????????????????????//圖例關(guān)閉時的顏色

????textStyle:mytextStyle, ???????????????????//文本樣式

????data:['類別1', '類別2', '類別3'], ?????????//series中根據(jù)名稱區(qū)分

????backgroundColor:"transparent", ???????????//標(biāo)題背景色

????borderColor:"#ccc", ????????????????????????//邊框顏色

????borderWidth:0, ??????????????????????????????//邊框線寬

????shadowColor:"red", ?????????????????????????//陰影顏色

????shadowOffsetX:0, ???????????????????????????//陰影水平方向上的偏移距離

????shadowOffsetY:0, ???????????????????????????//陰影垂直方向上的偏移距離

????shadowBlur:10, ??????????????????????????????//陰影的模糊大小

};

4.toolbox

toolbox={

????show : true, ????????????????????????????????//是否顯示工具欄組件

????orient:"horizontal", ???????????????????????//工具欄 icon 的布局朝向'horizontal' 'vertical'

????itemSize:15, ????????????????????????????????//工具欄 icon 的大小

????itemGap:10, ?????????????????????????????????//工具欄 icon 每項之間的間隔

????showTitle:true, ????????????????????????????//是否在鼠標(biāo) hover 的時候顯示每個工具 icon 的標(biāo)題

????feature : {

????????mark : { ????????????????????????????????// '輔助線開關(guān)'

????????????show: true

????????},

????????dataView : { ???????????????????????????//數(shù)據(jù)視圖工具，可以展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù)，編輯后可以動態(tài)更新

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

????????????title:"數(shù)據(jù)視圖",

????????????readOnly: false, ???????????????????//是否不可編輯（只讀）

????????????lang: ['數(shù)據(jù)視圖', '關(guān)閉', '刷新'], ?//數(shù)據(jù)視圖上有三個話術(shù)，默認(rèn)是['數(shù)據(jù)視圖', '關(guān)閉', '刷新']

????????????backgroundColor:"#fff", ????????????//數(shù)據(jù)視圖浮層背景色。

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

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

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

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

????????????buttonTextColor:"#fff", ????????????//按鈕文本顏色。

????????},

????????magicType: { ???????????????????????????//動態(tài)類型切換

????????????show: true,

????????????title:"切換", ??????????????????????//各個類型的標(biāo)題文本，可以分別配置。

????????????type: ['line', 'bar'], ?????????????//啟用的動態(tài)類型，包括'line'（切換為折線圖）, 'bar'（切換為柱狀圖）, 'stack'（切換為堆疊模式）, 'tiled'（切換為平鋪模式）

????????},

????????restore : { ????????????????????????????//配置項還原。

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

????????????title:"還原",

????????},

????????saveAsImage : { ????????????????????????//保存為圖片。

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

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

????????????name:"pic1", ???????????????????????//保存的文件名稱，默認(rèn)使用 title.text 作為名稱

????????????backgroundColor:"#ffffff", ???????//保存的圖片背景色，默認(rèn)使用 backgroundColor，如果backgroundColor不存在的話會取白色

????????????title:"保存為圖片",

????????????pixelRatio:1 ???????????????????????//保存圖片的分辨率比例，默認(rèn)跟容器相同大小，如果需要保存更高分辨率的，可以設(shè)置為大于 1 的值，例如 2

????????},

????????dataZoom :{ ????????????????????????????//數(shù)據(jù)區(qū)域縮放。目前只支持直角坐標(biāo)系的縮放

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

????????????title:"縮放", ??????????????????????//縮放和還原的標(biāo)題文本

????????????xAxisIndex:0, ??????????????????????//指定哪些 xAxis 被控制。如果缺省則控制所有的x軸。如果設(shè)置為 false 則不控制任何x軸。如果設(shè)置成 3 則控制 axisIndex 為 3 的x軸。如果設(shè)置為 [0, 3] 則控制 axisIndex 為 0 和 3 的x軸

????????????yAxisIndex:false, ??????????????????//指定哪些 yAxis 被控制。如果缺省則控制所有的y軸。如果設(shè)置為 false 則不控制任何y軸。如果設(shè)置成 3 則控制 axisIndex 為 3 的y軸。如果設(shè)置為 [0, 3] 則控制 axisIndex 為 0 和 3 的y軸

????????},

????},

????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", ?????????????????????????????//圖例高度

};

5.dataZoom

mdataZoom=[ ?????????????????????????????????????//區(qū)域縮放

????{

????????id: 'dataZoomX',

????????show:true, ?????????????????????????????//是否顯示 組件。如果設(shè)置為 false，不會顯示，但是數(shù)據(jù)過濾的功能還存在。

????????backgroundColor:"rgba(47,69,84,0)", ?//組件的背景顏色

????????type: 'slider', ????????????????????????//slider表示有滑動塊的，inside表示內(nèi)置的

????????dataBackground:{ ???????????????????????//數(shù)據(jù)陰影的樣式。

????????????lineStyle:mylineStyle, ?????????????//陰影的線條樣式

????????????areaStyle:myareaStyle, ?????????????//陰影的填充樣式

????????},

????????fillerColor:"rgba(167,183,204,0.4)", ?//選中范圍的填充顏色。

????????borderColor:"#ddd", ????????????????????//邊框顏色。

????????filterMode: 'filter', ??????????????????//'filter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過濾掉。即 會 影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只要有一個維度在數(shù)據(jù)窗口外，整個數(shù)據(jù)項就會被過濾掉。

??????????????????????????????????????????????????//'weakFilter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過濾掉。即 會 影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只有當(dāng)全部維度都在數(shù)據(jù)窗口同側(cè)外部，整個數(shù)據(jù)項才會被過濾掉。

??????????????????????????????????????????????????//'empty'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 設(shè)置為空。即 不會 影響其他軸的數(shù)據(jù)范圍。

??????????????????????????????????????????????????//'none': 不過濾數(shù)據(jù)，只改變數(shù)軸范圍。

????????xAxisIndex:0, ???????????????????????????//設(shè)置 dataZoom-inside 組件控制的 x軸,可以用數(shù)組表示多個軸

????????yAxisIndex:[0,2], ???????????????????????//設(shè)置 dataZoom-inside 組件控制的 y軸,可以用數(shù)組表示多個軸

????????radiusAxisIndex:3, ??????????????????????//設(shè)置 dataZoom-inside 組件控制的 radius 軸,可以用數(shù)組表示多個軸

????????angleAxisIndex:[0,2], ???????????????????//設(shè)置 dataZoom-inside 組件控制的 angle 軸,可以用數(shù)組表示多個軸

????????start: 30, ???????????????????????????????//數(shù)據(jù)窗口范圍的起始百分比,表示30%

????????end: 70, ?????????????????????????????????//數(shù)據(jù)窗口范圍的結(jié)束百分比,表示70%

????????startValue:10, ??????????????????????????//數(shù)據(jù)窗口范圍的起始數(shù)值

????????endValue:100, ???????????????????????????//數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。

????????orient:"horizontal", ???????????????????//布局方式是橫還是豎。不僅是布局方式，對于直角坐標(biāo)系而言，也決定了，缺省情況控制橫向數(shù)軸還是縱向數(shù)軸。'horizontal'：水平。'vertical'：豎直。

????????zoomLock:false, ?????????????????????????//是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小。如果設(shè)置為 true 則鎖定選擇區(qū)域的大小，也就是說，只能平移，不能縮放。

????????throttle:100, ????????????????????????????//設(shè)置觸發(fā)視圖刷新的頻率。單位為毫秒（ms）。

????????zoomOnMouseWheel:true, ?????????????????//如何觸發(fā)縮放。可選值為：true：表示不按任何功能鍵，鼠標(biāo)滾輪能觸發(fā)縮放。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放。'shift'：表示按住 shift 和鼠標(biāo)滾輪能觸發(fā)縮放。'ctrl'：表示按住 ctrl 和鼠標(biāo)滾輪能觸發(fā)縮放。'alt'：表示按住 alt 和鼠標(biāo)滾輪能觸發(fā)縮放。

????????moveOnMouseMove:true, ??????????????????//如何觸發(fā)數(shù)據(jù)窗口平移。true：表示不按任何功能鍵，鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放。'shift'：表示按住 shift 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'ctrl'：表示按住 ctrl 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'alt'：表示按住 alt 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。

????????left:"center", ??????????????????????????//組件離容器左側(cè)的距離,'left', 'center', 'right','20%'

????????top:"top", ???????????????????????????????//組件離容器上側(cè)的距離,'top', 'middle', 'bottom','20%'

????????right:"auto", ????????????????????????????//組件離容器右側(cè)的距離,'20%'

????????bottom:"auto", ???????????????????????????//組件離容器下側(cè)的距離,'20%'

?

????},

????{

????????id: 'dataZoomY',

????????type: 'inside',

????????filterMode: 'empty',

????????disabled:false, ????????????????????????//是否停止組件的功能。

????????xAxisIndex:0, ??????????????????????????//設(shè)置 dataZoom-inside 組件控制的 x軸,可以用數(shù)組表示多個軸

????????yAxisIndex:[0,2], ??????????????????????//設(shè)置 dataZoom-inside 組件控制的 y軸,可以用數(shù)組表示多個軸

????????radiusAxisIndex:3, ?????????????????????//設(shè)置 dataZoom-inside 組件控制的 radius 軸,可以用數(shù)組表示多個軸

????????angleAxisIndex:[0,2], ??????????????????//設(shè)置 dataZoom-inside 組件控制的 angle 軸,可以用數(shù)組表示多個軸

????????start: 30, ??????????????????????????????//數(shù)據(jù)窗口范圍的起始百分比,表示30%

????????end: 70, ?????????????????????????????????//數(shù)據(jù)窗口范圍的結(jié)束百分比,表示70%

????????startValue:10, ??????????????????????????//數(shù)據(jù)窗口范圍的起始數(shù)值

????????endValue:100, ???????????????????????????//數(shù)據(jù)窗口范圍的結(jié)束數(shù)值。

????????orient:"horizontal", ???????????????????//布局方式是橫還是豎。不僅是布局方式，對于直角坐標(biāo)系而言，也決定了，缺省情況控制橫向數(shù)軸還是縱向數(shù)軸。'horizontal'：水平。'vertical'：豎直。

????????zoomLock:false, ?????????????????????????//是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小。如果設(shè)置為 true 則鎖定選擇區(qū)域的大小，也就是說，只能平移，不能縮放。

????????throttle:100, ????????????????????????????//設(shè)置觸發(fā)視圖刷新的頻率。單位為毫秒（ms）。

????????zoomOnMouseWheel:true, ??????????????????//如何觸發(fā)縮放。可選值為：true：表示不按任何功能鍵，鼠標(biāo)滾輪能觸發(fā)縮放。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放。'shift'：表示按住 shift 和鼠標(biāo)滾輪能觸發(fā)縮放。'ctrl'：表示按住 ctrl 和鼠標(biāo)滾輪能觸發(fā)縮放。'alt'：表示按住 alt 和鼠標(biāo)滾輪能觸發(fā)縮放。

????????moveOnMouseMove:true, ???????????????????//如何觸發(fā)數(shù)據(jù)窗口平移。true：表示不按任何功能鍵，鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。false：表示鼠標(biāo)滾輪不能觸發(fā)縮放。'shift'：表示按住 shift 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'ctrl'：表示按住 ctrl 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。'alt'：表示按住 alt 和鼠標(biāo)移動能觸發(fā)數(shù)據(jù)窗口平移。

????}

];

6.visualMap

visualMap=[ ????????????????????????????????????//視覺映射組件，用于進(jìn)行『視覺編碼』，也就是將數(shù)據(jù)映射到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。

?????????????????????????????????????????????????// colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調(diào)。

????{

????????show:true, ?????????????????????????????//是否顯示 visualMap-continuous 組件。如果設(shè)置為 false，不會顯示，但是數(shù)據(jù)映射的功能還存在

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

????????min:10, ?????????????????????????????????//指定 visualMapContinuous 組件的允許的最小值

????????max:100, ????????????????????????????????//指定 visualMapContinuous 組件的允許的最大值

????????range:[15, 40], ?????????????????????????//指定手柄對應(yīng)數(shù)值的位置。range 應(yīng)在 min max 范圍內(nèi)

????????calculable:true, ???????????????????????//是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）

????????realtime:true, ?????????????????????????//拖拽時，是否實時更新

????????inverse:false, ?????????????????????????//是否反轉(zhuǎn) visualMap 組件

????????precision:0, ???????????????????????????//數(shù)據(jù)展示的小數(shù)精度，默認(rèn)為0，無小數(shù)點

????????itemWidth:20, ??????????????????????????//圖形的寬度，即長條的寬度。

????????itemHeight:140, ????????????????????????//圖形的高度，即長條的高度。

????????align:"auto", ??????????????????????????//指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

????????text:['High', 'Low'], ??????????????????//兩端的文本

????????textGap:10, ?????????????????????????????//兩端文字主體之間的距離，單位為px

????????dimension:2, ???????????????????????????//指定用數(shù)據(jù)的『哪個維度』，映射到視覺元素上。『數(shù)據(jù)』即 series.data。 可以把 series.data 理解成一個二維數(shù)組,其中每個列是一個維度,默認(rèn)取 data 中最后一個維度

????????seriesIndex:1, ?????????????????????????//指定取哪個系列的數(shù)據(jù)，即哪個系列的 series.data,默認(rèn)取所有系列

????????hoverLink:true, ????????????????????????//鼠標(biāo)懸浮到 visualMap 組件上時，鼠標(biāo)位置對應(yīng)的數(shù)值 在 圖表中對應(yīng)的圖形元素，會高亮

????????inRange:{ ??????????????????????????????//定義 在選中范圍中 的視覺元素

????????????color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

????????????symbolSize: [30, 100]

????????},

????????outOfRange:{ ?//定義 在選中范圍外 的視覺元素。

????????????color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

????????????symbolSize: [30, 100]

????????},

????????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%'

????????orient:"vertical", ????????????????????????//圖例排列方向

????????padding:5, ??????????????????????????????????//圖例內(nèi)邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]

????????backgroundColor:"transparent", ???????????//標(biāo)題背景色

????????borderColor:"#ccc", ????????????????????????//邊框顏色

????????borderWidth:0, ??????????????????????????????//邊框線寬

????????textStyle:mytextStyle, ?????????????????????//文本樣式

????????formatter: function (value) { ????????????????//標(biāo)簽的格式化工具。

????????????return 'aaaa' + value; ???????????????????// 范圍標(biāo)簽顯示內(nèi)容。

????????}

????},

????{

????????show:true, ?????????????????????????//是否顯示 visualMap-continuous 組件。如果設(shè)置為 false，不會顯示，但是數(shù)據(jù)映射的功能還存在

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

????????splitNumber:5, ?????????????????????//對于連續(xù)型數(shù)據(jù)，自動平均切分成幾段。默認(rèn)為5段

????????pieces: [ ??????????????????????????//自定義『分段式視覺映射組件（visualMapPiecewise）』的每一段的范圍，以及每一段的文字，以及每一段的特別的樣式

????????????{min: 1500}, ????????????????????// 不指定 max，表示 max 為無限大（Infinity）。

????????????{min: 900, max: 1500},

????????????{min: 310, max: 1000},

????????????{min: 200, max: 300},

????????????{min: 10, max: 200, label: '10 到 200（自定義label）'},

????????????{value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等于 123 的情況。

????????????{max: 5} ???????????????????????// 不指定 min，表示 min 為無限大（-Infinity）。

????????],

????????categories:['嚴(yán)重污染', '重度污染', '中度污染', '輕度污染', '良', '優(yōu)'], ?//用于表示離散型數(shù)據(jù)（或可以稱為類別型數(shù)據(jù)、枚舉型數(shù)據(jù)）的全集

????????min:10, ????????????????????????????//指定 visualMapContinuous 組件的允許的最小值

????????max:100, ????????????????????????????//指定 visualMapContinuous 組件的允許的最大值

????????minOpen:true, ??????????????????????//界面上會額外多出一個『< min』的選塊

????????maxOpen:true, ??????????????????????//界面上會額外多出一個『> max』的選塊。

????????selectedMode:"multiple", ??????????//選擇模式，可以是：'multiple'（多選）。'single'（單選）。

????????inverse:false, ?????????????????????//是否反轉(zhuǎn) visualMap 組件

????????precision:0, ???????????????????????//數(shù)據(jù)展示的小數(shù)精度，默認(rèn)為0，無小數(shù)點

????????itemWidth:20, ??????????????????????//圖形的寬度，即長條的寬度。

????????itemHeight:140, ????????????????????//圖形的高度，即長條的高度。

????????align:"auto", ??????????????????????//指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

????????text:['High', 'Low'], ??????????????//兩端的文本

????????textGap:10, ?????????????????????????//兩端文字主體之間的距離，單位為px

????????showLabel:true, ????????????????????//是否顯示每項的文本標(biāo)簽

????????itemGap:10, ?????????????????????????//每兩個圖元之間的間隔距離，單位為px

????????itemSymbol:"roundRect", ????????????//默認(rèn)的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

????????dimension:2, ?????????????????????????//指定用數(shù)據(jù)的『哪個維度』，映射到視覺元素上。『數(shù)據(jù)』即 series.data。 可以把 series.data 理解成一個二維數(shù)組,其中每個列是一個維度,默認(rèn)取 data 中最后一個維度

????????seriesIndex:1, ???????????????????????//指定取哪個系列的數(shù)據(jù)，即哪個系列的 series.data,默認(rèn)取所有系列

????????hoverLink:true, ?????????????????????//鼠標(biāo)懸浮到 visualMap 組件上時，鼠標(biāo)位置對應(yīng)的數(shù)值 在 圖表中對應(yīng)的圖形元素，會高亮

????????inRange:{ ????????????????????????????//定義 在選中范圍中 的視覺元素

????????????color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

????????????symbolSize: [30, 100]

????????},

????????outOfRange:{ ???????????????????????????//定義 在選中范圍外 的視覺元素。

????????????color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

????????????symbolSize: [30, 100]

????????},

????????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%'

????????orient:"vertical", ???????????????????????//圖例排列方向

????????padding:5, ??????????????????????????????????//圖例內(nèi)邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]

????????backgroundColor:"transparent", ???????????//標(biāo)題背景色

????????borderColor:"#ccc", ????????????????????????//邊框顏色

????????borderWidth:0, ??????????????????????????????//邊框線寬

????????textStyle:mytextStyle, ?????????????????????//文本樣式

????????formatter: function (value) { ???????????????//標(biāo)簽的格式化工具。

????????????return 'aaaa' + value; ??????????????????// 范圍標(biāo)簽顯示內(nèi)容。

????????}

????}

];
原文：https://blog.csdn.net/wine_and_coffee/article/details/80803830

轉(zhuǎn)載于:https://www.cnblogs.com/chenjunsheng/p/9908058.html

總結(jié)

以上是生活随笔為你收集整理的ECharts公共组件：title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。