Echart Flicker Effect, highlight and downplay data points on hover using a flickering effect...

[zhangguolin333]

HTML example:
`

<title>ECharts Demo</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

<script type="text/javascript">
	var IE = [['2023-11-16 06:08:14.180', 2034.657906, -2833.104724], ['2023-11-16 06:08:15.180', 2030.486722, -2824.946075]];
	var IPS = [['2023-11-16 06:08:14.180', 2033.493465, -2831.467243], ['2023-11-16 06:08:15.180', 2029.374957, -2823.291314]];
	var GNSS = [['2023-11-16 06:08:14.180', 2035.022432, -2834.273385], ['2023-11-16 06:08:15.180', 2030.93313, -2826.295059]];            
	var stopFlash_IE, stopFlash_IPS, stopFlash_GNSS; 
	
    // Initialize the chart
    var myChart = echarts.init(document.getElementById('main'));

    // Define a function for flicker effects
    function flashSeries(seriesIndex, dataIndex) {
        let flashing = true;
        let interval = setInterval(function() {
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: seriesIndex,
                dataIndex: dataIndex
            });

            setTimeout(function() {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: seriesIndex,
                    dataIndex: dataIndex
                });
            }, 150);

            if (!flashing) {
                clearInterval(interval);
            }
        }, 300);

        return function() {
            flashing = false;
            clearInterval(interval);
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: seriesIndex,
                dataIndex: dataIndex
            });
        };
    }

    // Configure the options and data for the chart
    var option = {
        title: {
            text: 'NED Point Line Chart',
            left: 'center',
            top: '10px'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    show: true,
                    backgroundColor: '#6a7985'
                }
            },
			backgroundColor: 'rgba(255, 255, 255, 0.7)',  // Set the tooltip background color and transparency
		    textStyle: {
				color: '#000'  // Set the text color to black
			},
			formatter: function (params) {
				let result = '';
				params.forEach(function (item) {
					let utc;
					if (item.seriesName === 'IE') {
						utc = IE[item.dataIndex][0];
					} else if (item.seriesName === 'IPS') {
						utc = IPS[item.dataIndex][0];
					} else if (item.seriesName === 'GNSS') {
						utc = GNSS[item.dataIndex][0];
					}
					result += `Series: ${item.seriesName}<br/>UTC: ${utc}<br/>POINT: (${item.value[0]}, ${item.value[1]})<br/><br/>`;
				});
				return result;
			}
        },
        legend: {
            orient: 'vertical',
            right: 40,
            top: 20,
            bottom: 20,
            itemGap: 10,
            itemWidth: 24,
            itemHeight: 14
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'None'
                },
                restore: {},
                saveAsImage: {}
            },
            top: 15,
            right: '10%'
        },
        dataZoom: [{
            type: 'slider',
            show: false,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1],
			zoomLock: false  // Unnot not ing, allowing free scaling
        }, {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1],
			zoomOnMouseWheel: true,  // Enable the mouse roller zoom
			moveOnMouseMove: true,   // Dynamic adjusts the view as the mouse moves
			preventDefaultMouseMove: true,  // Prevent the default page-scrolling behavior
			zoomToMousePosition: true  // Center on the mouse pointer when the zoom is turned on
        }],
        xAxis: {
            type: 'value',
			name: 'East (X)',
            scale: true
        },
        yAxis: {
            type: 'value',
			name: 'North (Y)',
            scale: true
        },
        series: [
            {
                name: 'IE',
                type: 'line',
                data: IE.map(item => [item[1], item[2]]),
				// Too large data does not animate the threshold switch setting
				large: true,
				largeThreshold: 5000,
				animation: false,   // Disable animation
				progressive: 5000,  // 5000 data points per rendering
				progressiveThreshold: 20000,  // Enable progressive when the data exceeds 20,000
				// Color of the symbol when the data points are highlighted
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        borderColor: '#ff0000',
                        borderWidth: 5
                    }
                },
                symbol: 'circle',
                symbolSize: 10,
                smooth: true,
				// The color of the connection
                lineStyle: {
                    color: 'green',
                    width: 4
                },
				// Color of the symbol
                itemStyle: {
                    color: 'red'
                }
            },
            {
                name: 'IPS',
                type: 'line',
                data: IPS.map(item => [item[1], item[2]]),
				// Too large data does not animate the threshold switch setting
				large: true,
				largeThreshold: 5000,
				animation: false,   // Disable animation
				progressive: 5000,  // 5000 data points per rendering
				progressiveThreshold: 20000,  // Enable progressive when the data exceeds 20,000
				// Color of the symbol when the data points are highlighted
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        borderColor: '#ff0000',
                        borderWidth: 5
                    }
                },
                symbol: 'triangle',
                symbolSize: 10,
                smooth: true,
				// The color of the connection
                lineStyle: {
                    color: 'blue',
                    width: 4
                },
				// Color of the symbol
                itemStyle: {
                    color: 'green'
                }
            },
            {
                name: 'GNSS',
                type: 'line',
                data: GNSS.map(item => [item[1], item[2]]),
				// Too large data does not animate the threshold switch setting
				large: true,
				largeThreshold: 5000,
				animation: false,   // Disable animation
				progressive: 5000,  // 5000 data points per rendering
				progressiveThreshold: 20000,  // Enable progressive when the data exceeds 20,000
				// Color of the symbol when the data points are highlighted
                emphasis: {
                    itemStyle: {
                        color: '#ff0000',
                        borderColor: '#ff0000',
                        borderWidth: 5
                    }
                },
                symbol: 'diamond',
                symbolSize: 10,
                smooth: true,
				// The color of the connection
                lineStyle: {
                    color: 'orange',
                    width: 4
                },
				// Color of the symbol
                itemStyle: {
                    color: 'blue'
                }
            }
        ]
    };
    // Display the graphs using the specified configuration items and data
    myChart.setOption(option);
	
    // Handling mouse hover events
    myChart.on('mouseover', function(params) {
        var utc, dataIndexA, dataIndexB, dataIndexC;
        
        if (params.seriesName === 'IE') {
            utc = IE[params.dataIndex][0];
        } else if (params.seriesName === 'IPS') {
            utc = IPS[params.dataIndex][0];
        } else if (params.seriesName === 'GNSS') {
            utc = GNSS[params.dataIndex][0];
        }

        // Find the data points for the same UTC time
        dataIndexA = IE.findIndex(item => item[0] === utc);
        dataIndexB = IPS.findIndex(item => item[0] === utc);
        dataIndexC = GNSS.findIndex(item => item[0] === utc);
		
		// Stop the previous before
		if (typeof stopFlash_IE === 'function') stopFlash_IE();
		if (typeof stopFlash_IPS === 'function') stopFlash_IPS();
		if (typeof stopFlash_GNSS === 'function') stopFlash_GNSS();

        // Begin to flicker
        if (dataIndexA !== -1) stopFlash_IE = flashSeries(0, dataIndexA);
        if (dataIndexB !== -1) stopFlash_IPS = flashSeries(1, dataIndexB);
        if (dataIndexC !== -1) stopFlash_GNSS = flashSeries(2, dataIndexC);
    });

    // Process the mouse-over events
    myChart.on('mouseout', function() {
        if (typeof stopFlash_IE === 'function') stopFlash_IE();
        if (typeof stopFlash_IPS === 'function') stopFlash_IPS();
        if (typeof stopFlash_GNSS === 'function') stopFlash_GNSS();
    });
	
</script>

`

As follows is part of my niceGUI pseudo-code:
option = {....} # The content is the same as the ”var option“ in the html as above mychart = ui.echart(options=option).props('id=myEChart;').style('height: 100%; width: 100%')

So now I need to achieve the purpose as in the HTML example, when the mouse suspension data point symbol can flash, I do not understand, how to get mychart instance in add_body_html after creating mychart, and then js execution, maybe I can not express clearly, but HTML example is obvious, how should I do?

[falkoschindler]

@zhangguolin333 Why are you duplicating your post?

[zhangguolin333]

I don't know how to refresh the post, I desperately want someone to help me, I am stuck in here, really sorry... (:

[zhangguolin333]

I feel very helpless.....