NourSaleh91 opened a new issue, #17424:
URL: https://github.com/apache/echarts/issues/17424
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
1- built regular line chart as the following:
`import React, { useLayoutEffect } from "react";
import styled from "@emotion/styled";
import * as echarts from "echarts";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-regular-svg-icons";
import ReactEcharts from "echarts-for-react";
const Container = styled.div`
position: relative;
height: 100%;
min-height: 187px;
`;
const Content = styled.div`
position: absolute;
//width: 410px;
//height: 200%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid rgba(0, 83, 229, 0.12);
border-radius: 8px;
`;
const Title = styled.div`
display: flex;
flex-direction: row;
gap: 4px;
margin-top: 18.5px;
margin-left: 16px;
`;
const TitleText = styled.div`
font-family: "Open Sans";
font-style: normal;
font-size: 10px;
line-height: 17px;
align: left;
letter-spacing: 0.4px;
color: #6877AE;
`;
const StyledIcon = styled(FontAwesomeIcon)({
fontFamily: "Font Awesome 6 Pro",
fontSize: "12px",
color: "#6877AE",
lineHeight: "12px",
marginTop: "2px"
});
const ChartData = [
{ value: 70, date: "10-Jan-2019" },
{ value: 71, date: "10-Feb-2019" },
{ value: 72, date: "11-Feb-2019" },
{ value: 68, date: "10-Mar-2019" },
{ value: 67, date: "11-Mar-2019" },
{ value: 67, date: "11-Mar-2019" },
{ value: 72, date: "10-Apr-2019" },
{ value: 76, date: "10-May-2019" },
{ value: 78, date: "10-Jun-2019" },
{ value: 80, date: "10-Jul-2019" },
{ value: 78, date: "10-Aug-2019" },
{ value: 80, date: "10-Sep-2019" },
{ value: 77, date: "10-Oct-2019" },
{ value: 74, date: "10-Nov-2019" },
{ value: 72, date: "10-Dec-2019" }
];
export const LineChart = () => {
useLayoutEffect(() => {
const div = document.getElementById("apache_echarts_line_chart") as
HTMLDivElement;
if (!div) {
return;
}
//TODO: Understand the difference between using canvas vs. svg
const chart = echarts.init(div, undefined, { renderer: "canvas" });
const parentDiv = div.parentElement;
if (!parentDiv) {
return;
}
const getDates = () : string[] => {
const dates: Array<string> = [];
ChartData.forEach(item => {
dates.push(item.date);
});
return dates;
};
const getValues = () => {
const values: Array<number> = [];
ChartData.forEach(item => {
values.push(item.value);
});
return values;
};
chart.setOption({
grid: {
left: 55,
top: 70,
right: 21,
bottom: 35
},
tooltip: {
trigger: "axis",
showDelay: 20,
triggerOn: "mousemove"
},
xAxis: {
type: "category",
data: getDates(),
boundaryGap: false,
axisLabel: {
formatter: function (value: any) {
const date = new Date(value);
return date.toDateString().split(' ')[1];
}
}
},
yAxis: {
type: "value",
name: "Views",
nameLocation: "middle",
nameGap: 25,
nameTextStyle: {
color: "#000000",
align: "left",
fontWeight: 400,
fontSize: 8,
lineHeight: 21.28,
//padding: [0, 0, 0, -10]
},
splitLine: {
show: false
}
},
series: [
{
name: "views",
data: getValues(),
type: "line",
smooth: true,
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0,
0.5, [
{
offset: 0,
color: 'rgba(0, 65, 205, 0.21)'
},
{
offset: 1,
color: 'rgba(0, 65, 205, 0)'
}
]
)
}
}
]
});
const resizeObserver = new ResizeObserver(() => chart.resize());
resizeObserver.observe(div.parentElement);
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
return () => {
resizeObserver.disconnect();
//TODO: Understand when "dispose" is needed
chart.dispose();
};
}, [ChartData]);
return (
<Container>
<Title>
<StyledIcon icon={faEye} />
<TitleText>
Views over time
</TitleText>
</Title>
<Content id={"apache_echarts_line_chart"} />
</Container>
);
};
`
2- as you can see i'm trying to register the following event:
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
but i can't see any output in the console, please advice
### Current Behavior
can't see any output in the console from the event:
chart.on('click', function (params) {
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa");
console.log(params);
});
Please advice
### Expected Behavior
see the console log when clicking on the chart
### Environment
```markdown
- OS: Win 11
- Browser: chrome
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
