新聞中心
series[i]-boxplot.markPoint
通過 markPoint 設置 ECharts 箱形圖的標注。

成都創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網(wǎng)站設計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的突泉網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!
symbol
用于標注標記的圖形,默認為 pin。
ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通過 'image://url' 設置為圖片,其中 url 為圖片的鏈接,或者 dataURI。
可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式,不用擔心因為縮放而產(chǎn)生鋸齒或模糊,而且可以設置為任意顏色。路徑圖形會自適應調(diào)整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。
symbolSize
標記的大小,可以設置成諸如 10 這樣單一的數(shù)字(默認的數(shù)值值為 50),也可以用數(shù)組分開表示寬和高,例如 [20, 10] 表示標記寬為20,高為10。
如果需要每個數(shù)據(jù)的圖形大小不一樣,可以設置為如下格式的回調(diào)函數(shù):
(value: Array|number, params: Object) => number|Array
其中第一個參數(shù) value 為 data 中的數(shù)據(jù)值。第二個參數(shù) params 是其它的數(shù)據(jù)項參數(shù)。
symbolRotate
標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。
symbolOffset
標記相對于原本位置的偏移。默認情況下,標記會居中置放在數(shù)據(jù)對應的位置,但是如果 symbol 是自定義的矢量路徑或者圖片,就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移,可以是絕對的像素值,也可以是相對的百分比。
例如 [0, '50%'] 就是把自己向上移動了一半的位置,在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據(jù)點。
silent
圖形是否不響應和觸發(fā)鼠標事件,默認為 false,即響應和觸發(fā)鼠標事件。
label
標注的文本。
itemStyle
標注的樣式。
data[i]
標注的數(shù)據(jù)數(shù)組。每個數(shù)組項是一個對象,有下面幾種方式指定標注的位置。
- 通過 x, y 屬性指定相對容器的屏幕坐標,單位像素,支持百分比。
- 用 coord 屬性指定數(shù)據(jù)在相應坐標系上的坐標位置,單個維度支持設置 'min', 'max', 'average'。
- 直接用 type 屬性標注系列中的最大值,最小值。這時候可以使用 valueIndex 指定是在哪個維度上的最大值、最小值、平均值?;蛘呖梢允褂?nbsp;valueDim 指定在哪個維度上的最大值、最小值、平均值。
當多個屬性同時存在時,優(yōu)先級按上述的順序。
示例:
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某個坐標',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某個屏幕坐標',
x: 100,
y: 100
}
]
animation
是否開啟動畫。默認為 true,即開啟動畫。
animationThreshold
是否開啟動畫的閾值,當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫。默認閾值為 2000。
animationDuration
初始動畫的時長,默認值為 1000,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果:
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
animationEasing
初始動畫的緩動效果,默認值為 cubicOut。不同的緩動效果可以參考 緩動示例。
animationDelay
初始動畫的延遲,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例:
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
也可以看該示例
animationDurationUpdate
數(shù)據(jù)更新動畫的時長,默認值為 300。
支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果:
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
animationEasingUpdate
數(shù)據(jù)更新動畫的緩動效果,默認值為 cubicOut。
animationDelayUpdate
數(shù)據(jù)更新動畫的延遲,支持回調(diào)函數(shù),可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
也可以看該示例
分享文章:創(chuàng)新互聯(lián)ECharts教程:設置ECharts箱形圖的標注
網(wǎng)站地址:http://www.5511xx.com/article/djhhjcc.html


咨詢
建站咨詢
