I'm using the following code to deactivate a previous event:
chartUse.getZr().on('mouseout', params => {
if (params.seriesIndex === 0) {
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#333']]
}
}
}
]
})
}
});
But it doesn't work. In other words, the code does not remove the color #f00 applied in the previous configuration.
When I move the mouse away from seriesIndex === 0 (line chart), I need the color to return to normal (#333), which is not happening.
Complete code:
document.addEventListener("DOMContentLoaded", () => {
const chartSystem = () => {
return {
"source": {
"bar": [
["x", "y", "groups"],
["Jan", 20, "group1"],
["Feb", 36, "group1"],
["Mar", 55, "group1"],
["Apr", 24, "group2"],
["May", 81, "group2"],
["Jun", 61, "group2"]
],
"gauge": [
["name", "value", "groups"],
["Pressure", 30, "group1"],
["Temperature", 66, "group2"]
]
}
}
}
const pullDataset = [];
const pullData = [];
const chartSend = () => {
const { source } = chartSystem();
pullDataset.push(...Object.values(source).slice(0, 1).map(item => ({
source: item,
sourceHeader: true
})));
pullData.push(...Object.values(source).slice(1).map(item => ({
data: item.slice(1).map( ([name, value, groups]) => ({
name,
value,
groupId: groups,
detail: {
backgroundColor: '#bcd090'
}
}))
})));
}
chartSend();
const chartUse = echarts.init(document.getElementsByClassName('chart')[0]);
function chartFrameSwitch0 () {
const tooltip0 = {
show: true
};
const grid0 = [
{
width: '40%',
height: '35%',
left: '5%'
}
];
const xAxis0 = [
{
type: 'category',
gridIndex: 0,
name: 'months',
nameTextStyle: {
color: '#000'
}
}
];
const yAxis0 = [
{
type: 'value',
gridIndex: 0
}
];
const series0 = [
{
type: 'line',
datasetIndex: 0,
encode: {
x: 0,
y: 1,
itemGroupId: 2
}
},
{
type: 'gauge',
center: ['75%', '50%'],
min: 0,
max: 100,
axisLine: {
lineStyle: {
width: 3,
color: [[1, '#333']]
}
},
data: pullData[0].data
}
];
const option = {
dataset: [pullDataset[0]],
tooltip: tooltip0,
grid: grid0,
xAxis: xAxis0,
yAxis: yAxis0,
series: series0
};
chartUse.setOption(option);
}
chartFrameSwitch0();
// Adicionando evento de mousemove no gráfico
chartUse.getZr().on("mousemove", params => {
// (1) get pixel coordinates
const pixelCoords = [params.offsetX, params.offsetY];
// (2) seriesIndex apply coordinates
const isOverAxisChart = chartUse.containPixel({ gridIndex: 0 }, pixelCoords);
if (isOverAxisChart) {
const usePixel = chartUse.convertFromPixel({ gridIndex: 0 }, pixelCoords);
console.log(usePixel);
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#f00']]
}
},
detail: {
backgroundColor: '#bcd090',
formatter: value => value.toFixed(1)
},
data: [
{
value: usePixel[0],
detail: {
offsetCenter: ['-20%', '70%']
}
},
{
value: usePixel[1],
detail: {
offsetCenter: ['20%', '70%']
}
}
]
}
]
});
chartUse.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: 1
});
}
});
chartUse.getZr().on('mouseout', params => {
if (params.seriesIndex === 0) {
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#333']]
}
}
}
]
})
}
});
});<head>
<script src='https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js'></script>
</head>
<div class='chart' style='width: 100%; height: 100vh;'></div>I also tried using the globalout event, but to no avail:
chartUse.getZr().on('globalout', params => {
if (params.seriesIndex === 0) {
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#333']]
}
}
}
]
})
}
});
You won't get such parameters as seriesIndex from a zrender event. You can get that using an echarts event (i.e., chartUse.on, not chartUse.getZr().on). The echarts event will be triggered on mouse leaving a data point, not the whole line chart space. So, if you had chartUse.on("mouseout", the event will be triggered, but because the mouse is still over the chart area, there will be a chartUse.getZr().on("mousemove" also that will color that element back to red.
So, if you want to work with the whole line chart area, you could simply add the black color in the
same mousemove zrender event handler:
chartUse.getZr().on("mousemove", params => {
const pixelCoords = [params.offsetX, params.offsetY];
const isOverAxisChart = chartUse.containPixel({ gridIndex: 0 }, pixelCoords);
if (isOverAxisChart) {
//..........................
}
else{
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#000']]
}
}
}
]
})
}
});
The globalout event is triggered when the mouse gets out of the whole canvas; it might be useful to set the black color always
on globalout - as it will be triggered when the browser tab gets in the background by a keyboard shortcut (e.g., Ctrl+Tab).
here's a snippet with that,
document.addEventListener("DOMContentLoaded", () => {
const chartSystem = () => {
return {
"source": {
"bar": [
["x", "y", "groups"],
["Jan", 20, "group1"],
["Feb", 36, "group1"],
["Mar", 55, "group1"],
["Apr", 24, "group2"],
["May", 81, "group2"],
["Jun", 61, "group2"]
],
"gauge": [
["name", "value", "groups"],
["Pressure", 30, "group1"],
["Temperature", 66, "group2"]
]
}
}
}
const pullDataset = [];
const pullData = [];
const chartSend = () => {
const { source } = chartSystem();
pullDataset.push(...Object.values(source).slice(0, 1).map(item => ({
source: item,
sourceHeader: true
})));
pullData.push(...Object.values(source).slice(1).map(item => ({
data: item.slice(1).map( ([name, value, groups]) => ({
name,
value,
groupId: groups,
detail: {
backgroundColor: '#bcd090'
}
}))
})));
}
chartSend();
const chartUse = echarts.init(document.getElementsByClassName('chart')[0]);
function chartFrameSwitch0 () {
const tooltip0 = {
show: true
};
const grid0 = [
{
width: '40%',
height: '35%',
left: '5%'
}
];
const xAxis0 = [
{
type: 'category',
gridIndex: 0,
name: 'months',
nameTextStyle: {
color: '#000'
}
}
];
const yAxis0 = [
{
type: 'value',
gridIndex: 0
}
];
const series0 = [
{
type: 'line',
datasetIndex: 0,
encode: {
x: 0,
y: 1,
itemGroupId: 2
}
},
{
type: 'gauge',
center: ['75%', '50%'],
min: 0,
max: 100,
axisLine: {
lineStyle: {
width: 3,
color: [[1, '#333']]
}
},
data: pullData[0].data
}
];
const option = {
dataset: [pullDataset[0]],
tooltip: tooltip0,
grid: grid0,
xAxis: xAxis0,
yAxis: yAxis0,
series: series0
};
chartUse.setOption(option);
}
chartFrameSwitch0();
// Adicionando evento de mousemove no gráfico
chartUse.getZr().on("mousemove", params => {
const pixelCoords = [params.offsetX, params.offsetY];
const isOverAxisChart = chartUse.containPixel({ gridIndex: 0 }, pixelCoords);
if (isOverAxisChart) {
const usePixel = chartUse.convertFromPixel({ gridIndex: 0 }, pixelCoords);
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#f00']]
}
},
detail: {
backgroundColor: '#bcd090',
formatter: value => value.toFixed(1)
},
data: [
{
value: usePixel[0],
detail: {
offsetCenter: ['-20%', '70%']
}
},
{
value: usePixel[1],
detail: {
offsetCenter: ['20%', '70%']
}
}
]
}
]
});
chartUse.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: 1
});
}
else{
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#000']]
}
}
}
]
})
}
});
chartUse.getZr().on('globalout', params => {
chartUse.setOption({
series: [
{},
{
axisLine: {
lineStyle: {
color: [[1, '#333']]
}
}
}
]
})
});
});<div class="chart" style="height:100vh"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>or as a fiddle
If you don't want to set the color at each mouse move when there's no need for that, you may use a global variable to keep track of the color state fiddle.