建站
咨詢
售后
建站咨詢
新聞中心
ECharts 使用 markLine 來設置柱狀圖標線，本文是對柱狀圖標線屬性的介紹。
創(chuàng)新互聯(lián)專業(yè)提供電信內(nèi)江機房服務，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買電信內(nèi)江機房服務，并享受7*24小時金牌售后服務。
series[i]-bar.markLine.silent | boolean
[ default: false ]
設置柱狀圖標線是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
series[i]-bar.markLine.symbol | string, Array
柱狀圖標線兩端的標記類型，可以是一個數(shù)組分別指定兩端，也可以是單個統(tǒng)一指定，具體格式見 data.symbol。
series[i]-bar.markLine.symbolSize | number, Array
標線兩端的標記大小，可以是一個數(shù)組分別指定兩端，也可以是單個統(tǒng)一指定。
注意： 這里無法像一般的 symbolSize 那樣通過數(shù)組分別指定高寬。series[i]-bar.markLine.precision | number
[ default: 2 ]
標線數(shù)值的精度，在顯示平均值線的時候有用。
series[i]-bar.markLine.label | Object
標線的文本。
series[i]-bar.markLine.lineStyle | Object
標線的樣式
series[i]-bar.markLine.data
標線的數(shù)據(jù)數(shù)組。每個數(shù)組項可以是一個兩個值的數(shù)組，分別表示線的起點和終點，每一項是一個對象，有下面幾種方式指定起點或終點的位置。
- 通過 x, y 屬性指定相對容器的屏幕坐標，單位像素，支持百分比。
- 用 coord 屬性指定數(shù)據(jù)在相應坐標系上的坐標位置，單個維度支持設置 'min', 'max', 'average'。
- 直接用 type 屬性標注系列中的最大值，最小值。這時候可以使用 valueIndex 或者 valueDim 指定是在哪個維度上的最大值、最小值、平均值。
- 如果是笛卡爾坐標系的話，也可以通過只指定 xAxis 或者 yAxis 來實現(xiàn) X 軸或者 Y 軸為某值的標線，見示例 scatter-weight
當多個屬性同時存在時，優(yōu)先級按上述的順序。
也可以是直接通過 type 設置該標線的類型，是最大值的線還是平均線。同樣的，這時候可以通過使用 valueIndex 指定維度。
data: [
{
name: '平均線',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 軸值為 100 的水平線',
yAxis: 100
},
[
{
// 起點和終點的項會共用一個 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '兩個坐標之間的標線',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起點的 x 像素位置，用于模擬一條指向最大值的水平線
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '兩個屏幕坐標之間的標線',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]series[i]-bar.markLine.animation | boolean
[ default: true ]
是否開啟動畫。
series[i]-bar.markLine.animationThreshold | number
[ default: 2000 ]
是否開啟動畫的閾值，當單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。
series[i]-bar.markLine.animationDuration | number
[ default: 1000 ]
初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}series[i]-bar.markLine.animationEasing | string
[ default: cubicOut ]
初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。
series[i]-bar.markLine.animationDelay | number, Function
[ default: 0 ]
初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
series[i]-bar.markLine.animationDurationUpdate | number, Function
[ default: 300 ]
數(shù)據(jù)更新動畫的時長。
支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}series[i]-bar.markLine.animationEasingUpdate | string
[ default: cubicOut ]
數(shù)據(jù)更新動畫的緩動效果。
series[i]-bar.markLine.animationDelayUpdate | number, Function
[ default: 0 ]
數(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/codcjih.html
