ECharts公共组件：title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解...
1.?Title
mytextStyle={
????color:"#333", ??????????????????????????//文字顏色
????fontStyle:"normal", ????????????????????//italic斜體 ?oblique傾斜
????fontWeight:"normal", ???????????????????//文字粗細bold ??bolder ??lighter ?100 | 200 | 300 | 400...
????fontFamily:"sans-serif", ???????????????//字體系列
????fontSize:18, ?????????????????????????????//字體大小
};
?
title={
????show:true, ????????????????????????????????//是否顯示
????text:"大標題", ????????????????????????????//大標題
????subtext:"小標題", ?????????????????????????//小標題
????sublink:"http://www.baidu.com", ?????????//小標題鏈接
????target:"blank", ???????????????????????????//'self' 當前窗口打開，'blank' 新窗口打開
????subtarget:"blank", ???????????????????????//小標題打開鏈接的窗口
????textAlign:"center", ??????????????????????//文本水平對齊
????textBaseline:"top", ??????????????????????//文本垂直對齊
????textStyle:mytextStyle, ????????????????????//標題樣式
????subtextStyle:mytextStyle, ????????????????//小標題樣式
????padding:5, ?????????????????????????????????//標題內邊距 5 ?[5, 10] ?[5,10,5,10]
????itemGap:10, ????????????????????????????????//大小標題間距
????zlevel:0, ??????????????????????????????????//所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
????z:2, ????????????????????????????????????????//所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋
????left:"center", ?????????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????top:"top", ??????????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????right:"auto", ??????????????????????????????//組件離容器右側的距離,'20%'
????bottom:"auto", ?????????????????????????????//組件離容器下側的距離,'20%'
????backgroundColor:"transparent", ???????????//標題背景色
????borderColor:"#ccc", ????????????????????????//邊框顏色
????borderWidth:0, ??????????????????????????????//邊框線寬
????shadowColor:"red", ?????????????????????????//陰影顏色
????shadowOffsetX:0, ???????????????????????????//陰影水平方向上的偏移距離
????shadowOffsetY:0, ???????????????????????????//陰影垂直方向上的偏移距離
????shadowBlur:10, ??????????????????????????????//陰影的模糊大小
};
?
2.tooltip的配置參數
tooltip ={//提示框組件
????trigger: 'item', ???????????????????????????//觸發類型,'item'數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
????triggerOn:"mousemove", ?????????????????????//提示框觸發的條件,'mousemove'鼠標移動時觸發。'click'鼠標點擊時觸發。'mousemove|click'同時鼠標移動和點擊時觸發。'none'不在 'mousemove' 或 'click' 時觸發
????showContent:true, ??????????????????????????//是否顯示提示框浮層
????alwaysShowContent:true, ????????????????????//是否永遠顯示提示框內容
????showDelay:0, ?????????????????????????????????//浮層顯示的延遲，單位為 ms
????hideDelay:100, ???????????????????????????????//浮層隱藏的延遲，單位為 ms
????enterable:false, ????????????????????????????//鼠標是否可進入提示框浮層中
????confine:false, ??????????????????????????????//是否將 tooltip 框限制在圖表的區域內
????transitionDuration:0.4, ?????????????????????//提示框浮層的移動動畫過渡時間，單位是 s,設置為 0 的時候會緊跟著鼠標移動
????position:['50%', '50%'], ???????????????????//提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置,[10, 10],回掉函數，inside鼠標所在圖形的內部中心位置，top、left、bottom、right鼠標所在圖形上側，左側，下側，右側，
????formatter:"{b0}: {c0}<br />{b1}: {c1}", ????//提示框浮層內容格式器，支持字符串模板和回調函數兩種形式,模板變量有 {a}, {b}，{c}，ozvdkddzhkzd，{e}，分別表示系列名，數據名，數據值等
????backgroundColor:"transparent", ???????????//標題背景色
????borderColor:"#ccc", ???????????????????????//邊框顏色
????borderWidth:0, ?????????????????????????????//邊框線寬
????padding:5, ?????????????????????????????????//圖例內邊距，單位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", ?????????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????top:"top", ??????????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????right:"auto", ??????????????????????????????//組件離容器右側的距離,'20%'
????bottom:"auto", ?????????????????????????????//組件離容器下側的距離,'20%'
????width:"auto", ??????????????????????????????//圖例寬度
????height:"auto", ?????????????????????????????//圖例高度
????orient:"horizontal", ???????????????????????//圖例排列方向
????align:"auto", ??????????????????????????????//圖例標記和文本的對齊,left,right
????padding:5, ??????????????????????????????????//圖例內邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]
????itemGap:10, ?????????????????????????????????//圖例每項之間的間隔
????itemWidth:25, ??????????????????????????????//圖例標記的圖形寬度
????itemHeight:14, ?????????????????????????????//圖例標記的圖形高度
????formatter:function (name) { ????????????????//用來格式化圖例文本，支持字符串模板和回調函數兩種形式。模板變量為圖例名稱 {name}
????????return 'Legend ' + name;
????},
????selectedMode:"single", ???????????????????//圖例選擇的模式,true開啟,false關閉,single單選,multiple多選
????inactiveColor:"#ccc", ????????????????????//圖例關閉時的顏色
????textStyle:mytextStyle, ???????????????????//文本樣式
????data:['類別1', '類別2', '類別3'], ?????????//series中根據名稱區分
????backgroundColor:"transparent", ???????????//標題背景色
????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, ????????????????????????????//是否在鼠標 hover 的時候顯示每個工具 icon 的標題
????feature : {
????????mark : { ????????????????????????????????// '輔助線開關'
????????????show: true
????????},
????????dataView : { ???????????????????????????//數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新
????????????show: true, ????????????????????????//是否顯示該工具。
????????????title:"數據視圖",
????????????readOnly: false, ???????????????????//是否不可編輯（只讀）
????????????lang: ['數據視圖', '關閉', '刷新'], ?//數據視圖上有三個話術，默認是['數據視圖', '關閉', '刷新']
????????????backgroundColor:"#fff", ????????????//數據視圖浮層背景色。
????????????textareaColor:"#fff", ??????????????//數據視圖浮層文本輸入區背景色
????????????textareaBorderColor:"#333", ????????//數據視圖浮層文本輸入區邊框顏色
????????????textColor:"#000", ???????????????????//文本顏色。
????????????buttonColor:"#c23531", ?????????????//按鈕顏色。
????????????buttonTextColor:"#fff", ????????????//按鈕文本顏色。
????????},
????????magicType: { ???????????????????????????//動態類型切換
????????????show: true,
????????????title:"切換", ??????????????????????//各個類型的標題文本，可以分別配置。
????????????type: ['line', 'bar'], ?????????????//啟用的動態類型，包括'line'（切換為折線圖）, 'bar'（切換為柱狀圖）, 'stack'（切換為堆疊模式）, 'tiled'（切換為平鋪模式）
????????},
????????restore : { ????????????????????????????//配置項還原。
????????????show: true, ????????????????????????//是否顯示該工具。
????????????title:"還原",
????????},
????????saveAsImage : { ????????????????????????//保存為圖片。
????????????show: true, ????????????????????????//是否顯示該工具。
????????????type:"png", ????????????????????????//保存的圖片格式。支持 'png' 和 'jpeg'。
????????????name:"pic1", ???????????????????????//保存的文件名稱，默認使用 title.text 作為名稱
????????????backgroundColor:"#ffffff", ???????//保存的圖片背景色，默認使用 backgroundColor，如果backgroundColor不存在的話會取白色
????????????title:"保存為圖片",
????????????pixelRatio:1 ???????????????????????//保存圖片的分辨率比例，默認跟容器相同大小，如果需要保存更高分辨率的，可以設置為大于 1 的值，例如 2
????????},
????????dataZoom :{ ????????????????????????????//數據區域縮放。目前只支持直角坐標系的縮放
????????????show: true, ????????????????????????//是否顯示該工具。
????????????title:"縮放", ??????????????????????//縮放和還原的標題文本
????????????xAxisIndex:0, ??????????????????????//指定哪些 xAxis 被控制。如果缺省則控制所有的x軸。如果設置為 false 則不控制任何x軸。如果設置成 3 則控制 axisIndex 為 3 的x軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的x軸
????????????yAxisIndex:false, ??????????????????//指定哪些 yAxis 被控制。如果缺省則控制所有的y軸。如果設置為 false 則不控制任何y軸。如果設置成 3 則控制 axisIndex 為 3 的y軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的y軸
????????},
????},
????zlevel:0, ??????????????????????????????????//所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
????z:2, ????????????????????????????????????????//所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋
????left:"center", ?????????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????top:"top", ??????????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????right:"auto", ??????????????????????????????//組件離容器右側的距離,'20%'
????bottom:"auto", ?????????????????????????????//組件離容器下側的距離,'20%'
????width:"auto", ??????????????????????????????//圖例寬度
????height:"auto", ?????????????????????????????//圖例高度
};
5.dataZoom
mdataZoom=[ ?????????????????????????????????????//區域縮放
????{
????????id: 'dataZoomX',
????????show:true, ?????????????????????????????//是否顯示 組件。如果設置為 false，不會顯示，但是數據過濾的功能還存在。
????????backgroundColor:"rgba(47,69,84,0)", ?//組件的背景顏色
????????type: 'slider', ????????????????????????//slider表示有滑動塊的，inside表示內置的
????????dataBackground:{ ???????????????????????//數據陰影的樣式。
????????????lineStyle:mylineStyle, ?????????????//陰影的線條樣式
????????????areaStyle:myareaStyle, ?????????????//陰影的填充樣式
????????},
????????fillerColor:"rgba(167,183,204,0.4)", ?//選中范圍的填充顏色。
????????borderColor:"#ddd", ????????????????????//邊框顏色。
????????filterMode: 'filter', ??????????????????//'filter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其他軸的數據范圍。每個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。
??????????????????????????????????????????????????//'weakFilter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其他軸的數據范圍。每個數據項，只有當全部維度都在數據窗口同側外部，整個數據項才會被過濾掉。
??????????????????????????????????????????????????//'empty'：當前數據窗口外的數據，被 設置為空。即 不會 影響其他軸的數據范圍。
??????????????????????????????????????????????????//'none': 不過濾數據，只改變數軸范圍。
????????xAxisIndex:0, ???????????????????????????//設置 dataZoom-inside 組件控制的 x軸,可以用數組表示多個軸
????????yAxisIndex:[0,2], ???????????????????????//設置 dataZoom-inside 組件控制的 y軸,可以用數組表示多個軸
????????radiusAxisIndex:3, ??????????????????????//設置 dataZoom-inside 組件控制的 radius 軸,可以用數組表示多個軸
????????angleAxisIndex:[0,2], ???????????????????//設置 dataZoom-inside 組件控制的 angle 軸,可以用數組表示多個軸
????????start: 30, ???????????????????????????????//數據窗口范圍的起始百分比,表示30%
????????end: 70, ?????????????????????????????????//數據窗口范圍的結束百分比,表示70%
????????startValue:10, ??????????????????????????//數據窗口范圍的起始數值
????????endValue:100, ???????????????????????????//數據窗口范圍的結束數值。
????????orient:"horizontal", ???????????????????//布局方式是橫還是豎。不僅是布局方式，對于直角坐標系而言，也決定了，缺省情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。
????????zoomLock:false, ?????????????????????????//是否鎖定選擇區域（或叫做數據窗口）的大小。如果設置為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
????????throttle:100, ????????????????????????????//設置觸發視圖刷新的頻率。單位為毫秒（ms）。
????????zoomOnMouseWheel:true, ?????????????????//如何觸發縮放。可選值為：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
????????moveOnMouseMove:true, ??????????????????//如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
????????left:"center", ??????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????????top:"top", ???????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????????right:"auto", ????????????????????????????//組件離容器右側的距離,'20%'
????????bottom:"auto", ???????????????????????????//組件離容器下側的距離,'20%'
?
????},
????{
????????id: 'dataZoomY',
????????type: 'inside',
????????filterMode: 'empty',
????????disabled:false, ????????????????????????//是否停止組件的功能。
????????xAxisIndex:0, ??????????????????????????//設置 dataZoom-inside 組件控制的 x軸,可以用數組表示多個軸
????????yAxisIndex:[0,2], ??????????????????????//設置 dataZoom-inside 組件控制的 y軸,可以用數組表示多個軸
????????radiusAxisIndex:3, ?????????????????????//設置 dataZoom-inside 組件控制的 radius 軸,可以用數組表示多個軸
????????angleAxisIndex:[0,2], ??????????????????//設置 dataZoom-inside 組件控制的 angle 軸,可以用數組表示多個軸
????????start: 30, ??????????????????????????????//數據窗口范圍的起始百分比,表示30%
????????end: 70, ?????????????????????????????????//數據窗口范圍的結束百分比,表示70%
????????startValue:10, ??????????????????????????//數據窗口范圍的起始數值
????????endValue:100, ???????????????????????????//數據窗口范圍的結束數值。
????????orient:"horizontal", ???????????????????//布局方式是橫還是豎。不僅是布局方式，對于直角坐標系而言，也決定了，缺省情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。
????????zoomLock:false, ?????????????????????????//是否鎖定選擇區域（或叫做數據窗口）的大小。如果設置為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
????????throttle:100, ????????????????????????????//設置觸發視圖刷新的頻率。單位為毫秒（ms）。
????????zoomOnMouseWheel:true, ??????????????????//如何觸發縮放。可選值為：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
????????moveOnMouseMove:true, ???????????????????//如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
????}
];
6.visualMap
visualMap=[ ????????????????????????????????????//視覺映射組件，用于進行『視覺編碼』，也就是將數據映射到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。
?????????????????????????????????????????????????// colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標簽）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。
????{
????????show:true, ?????????????????????????????//是否顯示 visualMap-continuous 組件。如果設置為 false，不會顯示，但是數據映射的功能還存在
????????type: 'continuous', ????????????????????// 定義為連續型 viusalMap
????????min:10, ?????????????????????????????????//指定 visualMapContinuous 組件的允許的最小值
????????max:100, ????????????????????????????????//指定 visualMapContinuous 組件的允許的最大值
????????range:[15, 40], ?????????????????????????//指定手柄對應數值的位置。range 應在 min max 范圍內
????????calculable:true, ???????????????????????//是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍）
????????realtime:true, ?????????????????????????//拖拽時，是否實時更新
????????inverse:false, ?????????????????????????//是否反轉 visualMap 組件
????????precision:0, ???????????????????????????//數據展示的小數精度，默認為0，無小數點
????????itemWidth:20, ??????????????????????????//圖形的寬度，即長條的寬度。
????????itemHeight:140, ????????????????????????//圖形的高度，即長條的高度。
????????align:"auto", ??????????????????????????//指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
????????text:['High', 'Low'], ??????????????????//兩端的文本
????????textGap:10, ?????????????????????????????//兩端文字主體之間的距離，單位為px
????????dimension:2, ???????????????????????????//指定用數據的『哪個維度』，映射到視覺元素上。『數據』即 series.data。 可以把 series.data 理解成一個二維數組,其中每個列是一個維度,默認取 data 中最后一個維度
????????seriesIndex:1, ?????????????????????????//指定取哪個系列的數據，即哪個系列的 series.data,默認取所有系列
????????hoverLink:true, ????????????????????????//鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮
????????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", ?????????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????????top:"top", ??????????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????????right:"auto", ??????????????????????????????//組件離容器右側的距離,'20%'
????????bottom:"auto", ?????????????????????????????//組件離容器下側的距離,'20%'
????????orient:"vertical", ????????????????????????//圖例排列方向
????????padding:5, ??????????????????????????????????//圖例內邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]
????????backgroundColor:"transparent", ???????????//標題背景色
????????borderColor:"#ccc", ????????????????????????//邊框顏色
????????borderWidth:0, ??????????????????????????????//邊框線寬
????????textStyle:mytextStyle, ?????????????????????//文本樣式
????????formatter: function (value) { ????????????????//標簽的格式化工具。
????????????return 'aaaa' + value; ???????????????????// 范圍標簽顯示內容。
????????}
????},
????{
????????show:true, ?????????????????????????//是否顯示 visualMap-continuous 組件。如果設置為 false，不會顯示，但是數據映射的功能還存在
????????type: 'piecewise', ?????????????????// 定義為分段型 visualMap
????????splitNumber:5, ?????????????????????//對于連續型數據，自動平均切分成幾段。默認為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:['嚴重污染', '重度污染', '中度污染', '輕度污染', '良', '優'], ?//用于表示離散型數據（或可以稱為類別型數據、枚舉型數據）的全集
????????min:10, ????????????????????????????//指定 visualMapContinuous 組件的允許的最小值
????????max:100, ????????????????????????????//指定 visualMapContinuous 組件的允許的最大值
????????minOpen:true, ??????????????????????//界面上會額外多出一個『< min』的選塊
????????maxOpen:true, ??????????????????????//界面上會額外多出一個『> max』的選塊。
????????selectedMode:"multiple", ??????????//選擇模式，可以是：'multiple'（多選）。'single'（單選）。
????????inverse:false, ?????????????????????//是否反轉 visualMap 組件
????????precision:0, ???????????????????????//數據展示的小數精度，默認為0，無小數點
????????itemWidth:20, ??????????????????????//圖形的寬度，即長條的寬度。
????????itemHeight:140, ????????????????????//圖形的高度，即長條的高度。
????????align:"auto", ??????????????????????//指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
????????text:['High', 'Low'], ??????????????//兩端的文本
????????textGap:10, ?????????????????????????//兩端文字主體之間的距離，單位為px
????????showLabel:true, ????????????????????//是否顯示每項的文本標簽
????????itemGap:10, ?????????????????????????//每兩個圖元之間的間隔距離，單位為px
????????itemSymbol:"roundRect", ????????????//默認的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
????????dimension:2, ?????????????????????????//指定用數據的『哪個維度』，映射到視覺元素上。『數據』即 series.data。 可以把 series.data 理解成一個二維數組,其中每個列是一個維度,默認取 data 中最后一個維度
????????seriesIndex:1, ???????????????????????//指定取哪個系列的數據，即哪個系列的 series.data,默認取所有系列
????????hoverLink:true, ?????????????????????//鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮
????????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", ?????????????????????????????//組件離容器左側的距離,'left', 'center', 'right','20%'
????????top:"top", ??????????????????????????????????//組件離容器上側的距離,'top', 'middle', 'bottom','20%'
????????right:"auto", ??????????????????????????????//組件離容器右側的距離,'20%'
????????bottom:"auto", ?????????????????????????????//組件離容器下側的距離,'20%'
????????orient:"vertical", ???????????????????????//圖例排列方向
????????padding:5, ??????????????????????????????????//圖例內邊距，單位px ?5 ?[5, 10] ?[5,10,5,10]
????????backgroundColor:"transparent", ???????????//標題背景色
????????borderColor:"#ccc", ????????????????????????//邊框顏色
????????borderWidth:0, ??????????????????????????????//邊框線寬
????????textStyle:mytextStyle, ?????????????????????//文本樣式
????????formatter: function (value) { ???????????????//標簽的格式化工具。
????????????return 'aaaa' + value; ??????????????????// 范圍標簽顯示內容。
????????}
????}
];
原文：https://blog.csdn.net/wine_and_coffee/article/details/80803830
轉載于:https://www.cnblogs.com/chenjunsheng/p/9908058.html
總結
以上是生活随笔為你收集整理的ECharts公共组件：title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用COE脚本绑定SQL Profile
- 下一篇： 福州大学软件工程1816 | W班 第7