Last active
March 9, 2023 03:37
-
-
Save chunrapeepat/aad026852321d5e27dcd1014407801db to your computer and use it in GitHub Desktop.
Uptime Chart -> Chronological timeline format (ECharts)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = []; | |
var dataCount = 20; | |
var startTime = +new Date(); | |
var categories = ['14/2/2020']; | |
var types = [ | |
{name: 'Offline', color: 'red'}, | |
{name: 'Online', color: 'green'}, | |
]; | |
// Generate mock data | |
echarts.util.each(categories, function (category, index) { | |
var baseTime = startTime; | |
for (var i = 0; i < dataCount; i++) { | |
var typeItem = types[Math.round(Math.random() * (types.length - 1))]; | |
var duration = Math.round(Math.random() * 10000); | |
data.push({ | |
name: typeItem.name, | |
value: [ | |
index, | |
baseTime, | |
baseTime += duration, | |
duration | |
], | |
itemStyle: { | |
normal: { | |
color: typeItem.color | |
} | |
} | |
}); | |
} | |
}); | |
function renderItem(params, api) { | |
var categoryIndex = api.value(0); | |
var start = api.coord([api.value(1), categoryIndex]); | |
var end = api.coord([api.value(2), categoryIndex]); | |
var height = api.size([0, 1])[1] * 0.6; | |
var rectShape = echarts.graphic.clipRectByRect({ | |
x: start[0], | |
y: start[1] - height / 2, | |
width: end[0] - start[0], | |
height: height | |
}, { | |
x: params.coordSys.x, | |
y: params.coordSys.y, | |
width: params.coordSys.width, | |
height: params.coordSys.height | |
}); | |
return rectShape && { | |
type: 'rect', | |
shape: rectShape, | |
style: api.style() | |
}; | |
} | |
option = { | |
tooltip: { | |
formatter: function (params) { | |
return params.marker + params.name + ': ' + params.value[3] + ' ms'; | |
} | |
}, | |
title: { | |
text: 'Uptime Chart', | |
left: 'center' | |
}, | |
dataZoom: [{ | |
type: 'slider', | |
filterMode: 'weakFilter', | |
showDataShadow: false, | |
top: 200, | |
height: 10, | |
borderColor: 'transparent', | |
backgroundColor: '#e2e2e2', | |
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line | |
handleSize: 20, | |
handleStyle: { | |
shadowBlur: 6, | |
shadowOffsetX: 1, | |
shadowOffsetY: 2, | |
shadowColor: '#aaa' | |
}, | |
labelFormatter: '' | |
}, { | |
type: 'inside', | |
filterMode: 'weakFilter' | |
}], | |
grid: { | |
height:100 | |
}, | |
xAxis: { | |
min: startTime, | |
scale: true, | |
axisLabel: { | |
formatter: function (val) { | |
return Math.max(0, val - startTime) + ' ms'; | |
} | |
} | |
}, | |
yAxis: { | |
data: categories | |
}, | |
series: [{ | |
type: 'custom', | |
renderItem: renderItem, | |
itemStyle: { | |
opacity: 0.8 | |
}, | |
encode: { | |
x: [1, 2], | |
y: 0 | |
}, | |
data: data | |
}] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment