建站
咨詢
售后
建站咨詢
新聞中心
ECharts 中使用 markPoint 可以控制柱狀圖的標注。
series[i]-bar.markPoint
設置 ECharts 柱狀圖標注，這是一個 Object。
series[i]-bar.markPoint.symbol
[ default: 'pin' ]
柱狀圖標注的圖形設置，取值類型為 string。
ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接，或者 dataURI；
也可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。
series[i]-bar.markPoint.symbolSize
[ default: 50 ]
柱狀圖標注的大小，值類型為 number、Array、Function；可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：
(value: Array|number, params: Object) => number|Array其中第一個參數 value 為 data 中的數據值。第二個參數 params 是其它的數據項參數。
series[i]-bar.markPoint.symbolRotate number
柱狀圖標注的旋轉角度，值類型為 number。
注意：在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。
series[i]-bar.markPoint.symbolOffset
[ default: [0, 0] ]
柱狀圖標注相對于原本位置的偏移，值類型為 Array。默認情況下，標記會居中置放在數據對應的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。
例如： [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數據點。
series[i]-bar.markPoint.silent
[ default: false ]
柱狀圖的圖形是否不響應和觸發(fā)鼠標事件，是 boolean 值，默認為 false，即響應和觸發(fā)鼠標事件。
series[i]-bar.markPoint.label
柱狀圖標注的文本，為 Object。
series[i]-bar.markPoint.itemStyle
柱狀圖標注的樣式，為 Object。
series[i]-bar.markPoint.data[i]
柱狀圖標注的數據數組，為 Object。每個數組項是一個對象，有下面幾種方式指定標注的位置。
- 通過 x, y 屬性指定相對容器的屏幕坐標，單位像素，支持百分比。
- 用 coord 屬性指定數據在相應坐標系上的坐標位置，單個維度支持設置 'min', 'max', 'average'。
- 直接用 type 屬性標注系列中的最大值，最小值。這時候可以使用 valueIndex 指定是在哪個維度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪個維度上的最大值、最小值、平均值。
當多個屬性同時存在時，優(yōu)先級按上述的順序。
示例：
data: [
{
name: '最大值',
type: 'max'
},
{
name: '某個坐標',
coord: [10, 20]
}, {
name: '固定 x 像素位置',
yAxis: 10,
x: '90%'
},
{
name: '某個屏幕坐標',
x: 100,
y: 100
}
]series[i]-bar.markPoint.animation
[ default: true ]
柱狀圖標注是否開啟動畫，值類型為 boolean，默認開啟。
series[i]-bar.markPoint.animationThreshold
[ default: 2000 ]
是否開啟動畫的閾值，值類型為 number，當單個系列顯示的圖形數量大于這個閾值時會關閉動畫。
series[i]-bar.markPoint.animationDuration
[ default: 1000 ]
初始動畫的時長，值類型為 number，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}series[i]-bar.markPoint.animationEasing
[ default: cubicOut ]
初始動畫的緩動效果，值類型為 string。不同的緩動效果可以參考 緩動示例。
series[i]-bar.markPoint.animationDelay
[ default: 0 ]
初始動畫的延遲，值類型為 number、Function支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}也可以看該示例
series[i]-bar.markPoint.animationDurationUpdate
[ default: 300 ]
數據更新動畫的時長，值類型為 number、Function。
支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}series[i]-bar.markPoint.animationEasingUpdate
[ default: cubicOut ]
數據更新動畫的緩動效果，值類型為 string。
series[i]-bar.markPoint.animationDelayUpdate
[ default: 0 ]
數據更新動畫的延遲，值類型為 number、Function；支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數據延遲越大
return idx * 100;
}也可以看該示例
網站名稱：創(chuàng)新互聯ECharts教程：ECharts柱狀圖的標注如何實現
轉載源于：http://m.5511xx.com/article/cdcsjoi.html
