Event Handling
Users can trigger related events through their operation. To react on Mouse and other events, use echartsInstance
:
/**
* On Mouse Click
*/
echartsInstance.on('click', (params) => {
notifySuccess(['Event', 'On Click']);
...
echartsInstance.resize(); // to redraw visualization
});
/**
* On Double Click
*/
echartsInstance.on('dblclick', (params) => {
...
echartsInstance.resize();
});
For more examples and details, take a look at the official documentation Event and Action.
Data Zoom to update Time Range
Data Zoom feature allows to select the time range on the chart. When time range selected the event can trigger updating dashboard's time range using locationService
parameter similar to Grafana behaviour.

const series = data.series.map((s) => {
const sData = s.fields.find((f) => f.type === "number").values.buffer;
const sTime = s.fields.find((f) => f.type === "time").values.buffer;
return {
name: s.refId,
type: "line",
showSymbol: false,
areaStyle: {
opacity: 0.1,
},
lineStyle: {
width: 1,
},
data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
};
});
/**
* Enable Data Zoom by default
*/
setTimeout(
() =>
echartsInstance.dispatchAction({
type: "takeGlobalCursor",
key: "dataZoomSelect",
dataZoomSelectActive: true,
}),
500
);
/**
* Update Time Range on Zoom
*/
echartsInstance.on("datazoom", function (params) {
const startValue = params.batch[0]?.startValue;
const endValue = params.batch[0]?.endValue;
locationService.partial({ from: startValue, to: endValue });
});
return {
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
},
legend: {
left: "0",
bottom: "0",
data: data.series.map((s) => s.refId),
textStyle: {
color: "rgba(128, 128, 128, .9)",
},
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: "none",
icon: {
zoom: "path://",
back: "path://",
},
},
saveAsImage: {},
},
},
xAxis: {
type: "time",
},
yAxis: {
type: "value",
min: "dataMin",
},
grid: {
left: "2%",
right: "2%",
top: "2%",
bottom: 24,
containLabel: true,
},
series,
};