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/[email protected]/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']]
}
}
}
]
})
}
});