I'm using echarts to plot some results that are dynamically produced by a third party application. The data feeding the echart has this format:
["1682049600","machine_A","Running","3000","0","#ca5d56","1682052600"]
["1682049700","machine_B","Stopped","3000","1","#ca5d56","1682053600"]
["1682049650","machine_C","Running","3000","2","#ca5d56","1682054600"]
I am using a custom echart to plot this data in a horizontal bars timeline, but I would like a way to get the yAxis with the value of machine_A, machine_B, machine_C but in a way that this data is passed dynamically to the yAxis. I cannot hardcode the categories with those machine names as the results from the thrid party app may be different every day. (some days some machines are not showing there for example, or new machines are added.....)
This is my code so far. Everything I have tried to pass the machine_names to the y Axis has failed:
{
xAxis: {
scale: true,
type: 'value',
splitLine: {
show: false
},
axisLabel: {
formatter: function (val) {
var date = new Date(parseInt(val)*1000);
var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
var locale = "$env:locale$";
var rtn = date.toLocaleDateString(locale, options);
return rtn;
}
}
},
yAxis: {
type: 'category',
axisLabel: {
\\This is not working
formatter: function (params, api) {
return api.value(1);
}
}
},
series: [
{
name: 'time line',
type: 'custom',
renderItem: function (params, api) {
var startVal = parseInt(api.value(0));
var endVal = parseInt(api.value(6));
var categoryIndex = parseInt(api.value(4));
var start = api.coord([startVal, categoryIndex]);
var end = api.coord([endVal, 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',
transition: ['shape'],
shape: rectShape,
style: {
"opacity": 0.8,
"fill": api.value(5),
"textPosition": "inside",
"textDistance": 5,
"fontStyle": "normal",
"fontWeight": "normal",
"fontSize": 12,
"fontFamily": "Microsoft YaHei",
"textFill": "#fff",
"textStroke": "#5470c6",
"textStrokeWidth": 2,
"text": null,
"legacy": true
}
}
);
},
itemStyle: {
opacity: 0.8
},
encode: {
x: [0,6],
y: 0
}
}
]
};
