How to know the actual target of click event in echarts?
I'd like to add an annotations feature to my echarts diagram. It'll be marked as a green dotted line with a green square marker if there's any annotation. When the user clicks the green square marker, a popup will open to show the actual annotation.
When I run the command below, it's triggered whenever I click anywhere on the annotation marker line. How can I tell if the user clicks specifically on the green square marker?
myChart.on('click', "series.line", function(params) {
console.log('normal click series.markLine', params)
})
Here is the demo: https://codepen.io/lora999/pen/azbGPKY
Solution
If you explore params in your myChart.on('click', "series.line", function(params){...
you can find ways to identify that the rectangle was clicked. The most straightforward one
seems to be params.event.target.type === 'rect' (tested with renderer svg also):
myChart.on('click', "series.line", function(params) {
if(params.event.target.type === 'rect'){
console.log('Rectangle clicked');
// use params.data.name or params.data._id to further
// identify the target, if multiple annotations are added
}
});
Runnable snippet:
const myChart = echarts.init(document.getElementById("chart-container"), null, {
renderer: "canvas",
useDirtyRect: false,
});
const option = {
"useUTC": false,
"grid": {
"containLabel": true,
"left": 35,
"right": 40,
"top": 40,
"bottom": 40
},
"xAxis": {
"type": "time",
},
"yAxis": {
"type": "value",
},
"tooltip": {
appendTo: 'body',
"borderColor": "transparent",
"show": true,
"trigger": "axis",
enterable: true,
},
"legend": {
"orient": "horizontal",
"show": true,
"type": "scroll",
"bottom": 0,
},
"series": [
{
"name": "series1",
"data": [
[
1041811200000,
30429.64
],
[
1043625600000,
99323.95999999999
],
[
1050883200000,
4219.2
],
],
"connectNulls": true,
"type": "line",
"smooth": false,
"showSymbol": false,
},
{
id: 'Annotation',
name: 'annotation',
type: "line",
markLine: {
symbol: 'none',
label: {
show: true,
formatter: '{icon|}',
rich: {
icon: {
height: 20,
width: 20,
backgroundColor: 'green',
_id:'__test__'
},
_id:'__test__'
}
},
data: [
{
name: 'annotationLine',
xAxis: 1043625600000,
lineStyle: {
width: 2,
color:'green'
},
_id: 'annotationLine'
},
]
}
},
],
};
myChart.on('click', "series.line", function(params) {
if(params.event.target.type === 'rect'){
console.log('Rectangle clicked');
// use params.data.name or params.data._id to further
// identify the target, if multiple annotations are added
}
});
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>However, the safest solution is to separate the rectangle from the line,
make them two different annotations, the rectangle implemented as
a markPoint:
const myChart = echarts.init(document.getElementById("chart-container"), null, {
renderer: "canvas",
useDirtyRect: false,
});
const option = {
"useUTC": false,
"grid": {
"containLabel": true,
"left": 35,
"right": 40,
"top": 40,
"bottom": 40
},
"xAxis": {
"type": "time",
},
"yAxis": {
"type": "value",
},
"tooltip": {
appendTo: 'body',
"borderColor": "transparent",
"show": true,
"trigger": "axis",
enterable: true,
},
"legend": {
"orient": "horizontal",
"show": true,
"type": "scroll",
"bottom": 0,
},
"series": [
{
"name": "series1",
"data": [
[
1041811200000,
30429.64
],
[
1043625600000,
99323.95999999999
],
[
1050883200000,
4219.2
],
],
"connectNulls": true,
"type": "line",
"smooth": false,
"showSymbol": false,
},
{
id: 'Annotation',
name: 'annotation',
type: "line",
markLine: {
symbol: 'none',
silent: true, // doesn't respond to click
label: {
show: false
},
data: [
{
name: 'annotationLine',
xAxis: 1043625600000,
lineStyle: {
width: 2,
color:'green'
},
_id: 'annotationLine'
},
]
},
markPoint: {
symbol: 'rect',
symbolSize: 20,
symbolOffset: [0, -10],
itemStyle: {
color: 'green'
},
label: {
show: false,
},
data: [
{
name: 'annotationPoint',
coord: [1043625600000, 100000],
_id: 'annotationPoint'
},
]
}
},
],
};
myChart.on('click', "series.line", function(params) {
// in this scenario, only the markPoint is responding to clicks; but if other items are
// added, params.componentType and/or params.data.name (or _id) may be used to identify the target
if(params.componentType === 'markPoint'){
console.log('Rectangle clicked', params.data.name);
}
})
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>or using the icon label, as in the original code (svg renderer used):
const myChart = echarts.init(document.getElementById("chart-container"), null, {
renderer: "svg",
useDirtyRect: false,
});
const option = {
"useUTC": false,
"grid": {
"containLabel": true,
"left": 35,
"right": 40,
"top": 40,
"bottom": 40
},
"xAxis": {
"type": "time",
},
"yAxis": {
"type": "value",
},
"tooltip": {
appendTo: 'body',
"borderColor": "transparent",
"show": true,
"trigger": "axis",
enterable: true,
},
"legend": {
"orient": "horizontal",
"show": true,
"type": "scroll",
"bottom": 0,
},
"series": [
{
"name": "series1",
"data": [
[
1041811200000,
30429.64
],
[
1043625600000,
99323.95999999999
],
[
1050883200000,
4219.2
],
],
"connectNulls": true,
"type": "line",
"smooth": false,
"showSymbol": false,
},
{
id: 'Annotation',
name: 'annotation',
type: "line",
markLine: {
symbol: 'none',
silent: true, // doesn't respond to click
label: {
show: false
},
data: [
{
name: 'annotationLine',
xAxis: 1043625600000,
lineStyle: {
width: 2,
color:'green'
},
_id: 'annotationLine'
},
]
},
markPoint: {
symbol: 'rect',
symbolSize: 20,
symbolOffset: [0, -10],
itemStyle: {
color: 'green'
},
label: {
show: false,
},
data: [
{
name: 'annotationPoint',
coord: [1043625600000, 100000],
_id: 'annotationPoint'
},
]
}
},
],
};
myChart.on('click', "series.line", function(params) {
// in this scenario, only the markPoint is responding to clicks; but if other items are
// added, params.componentType and/or params.data.name (or _id) may be used to identify the target
if(params.componentType === 'markPoint'){
console.log('Rectangle clicked', params.data.name);
}
});
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>- How to create a multi-category tooltip that shows the current state for all categories of a Gantt chart?
- Multiple tooltip valueFormatters
- Formatter AxisLabel Echarts fontWeight dosn't work
- How can I plot cartesian data?
- Echarts how to capture click on areaStyle of a stacked line chart
- How to know the actual target of click event in echarts?
- Need help showing y-axis on right side of chart for line overlay with go-echarts
- Apache Echarts YAxis ticks not visible when XAxis value is below zero
- Hiding the last tick of an axis in Apache ECharts
- Extending the chart line beyond its limits in ECharts when using the inside dataZoom
- How to remove the display of the upper border of the chart grid in ngx-echarts?
- How to change the type of the vertical grid line and extend the horizontal lines beyond the chart in ngx-echarts?
- Horizontal dataZoom slider does not plot data against the correct X axis values?
- How to shift divisions and labels not to start at zero for apache echarts
- How to maintain original data while using dataZoom in ECharts?
- How to center legend items along x axis in Apache Echarts?
- Does the echarts instance have a type defined for Typescript?
- How to create an interactive map using echarty package in R?
- ECharts Stacked Bar Chart: Setting BorderRadius on Topmost Bar Only
- How to control legend symbols in Apache ECharts StackChart?
- How to implement Multiple tooltip or label for bargraphs?
- How to update series data correctly in Nuxt eCharts module?
- How can I skew certain y-axis values on a line chart?
- How to align the x-Axis name label to the end of the x-Axis
- Force a 2 indexes ECharts plot to match 0 on both Y axis
- Set MarkLine to be on the righthand index boundary instead of in the middle of the cell
- Use of echartsInstance.getModel() with setOption()
- How do I access the development tools and change the defaultOption?
- How to deactivate a previous event with getZr.on()
- eCharts: Use for loop to generate points on a spider chart based on number of data points