current position:Home>Echorts auto play

Echorts auto play

2022-06-24 09:51:21Time202051

The use of plug-in vue-seamless-scroll

Import this directly js file , Do not understand the internal logic

(function (global) {
    
    global.tools = global.tools || {
    };

    /** * echarts tooltip  Automatic wheel broadcasting  * @author liuyishi * @param chart * @param chartOption * @param options * { * interval  Rotation interval , Unit millisecond , The default is 2000 * loopSeries boolean type , The default is false. * true Means to cycle all series Of tooltip,false The specified... Is displayed seriesIndex Of tooltip * seriesIndex  The default is 0, Specify a series (option Medium series Indexes ) Cycle show tooltip, *  When loopSeries by true when , from seriesIndex The series begins to execute . * } * @returns {
    {clearLoop: clearLoop}} */

    tools.loopShowTooltip = function (chart, chartOption, options) {
    
        var defaultOptions = {
    
            interval: 2000,
            loopSeries: false,
            seriesIndex: 0,
            updateData: null
        };

        if (!chart || !chartOption) {
    
            return {
    };
        }

        var dataIndex = 0; //  Data index , Initialize to -1, To determine whether it is the first time to execute 
        var seriesIndex = 0; //  Series index 
        var timeTicket = 0;
        var seriesLen = chartOption.series.length; //  Number of series 
        var dataLen = 0; //  Number of data in a series 
        var chartType; //  Series type 
        var first = true;

        //  No circulation series when seriesIndex Specify display tooltip Series , Do not specify default as 0, If more than one is specified, it defaults to the first 
        //  loop series when seriesIndex Specifies the of the loop series, If not specified, start from 0 Start cycling all series, Specifying a single is equivalent to not looping , Specify multiple 
        //  Do you want to add start series Index and start data Indexes ?

        if (options) {
    
            options.interval = options.interval || defaultOptions.interval;
            options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
            options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
            options.updateData = options.updateData || defaultOptions.updateData;
        } else {
    
            options = defaultOptions;
        }

        //  If the seriesIndex Invalid , The default is 0
        if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
    
            seriesIndex = 0;
        } else {
    
            seriesIndex = options.seriesIndex;
        }

        function autoShowTip() {
    
            function showTip() {
    
                //  Determine whether to update the data 
                if (dataIndex === 0 && !first && typeof options.updateData === "function") {
    
                    options.updateData();
                    chart.setOption(chartOption);
                }

                var series = chartOption.series;
                chartType = series[seriesIndex].type; //  Series type 
                dataLen = series[seriesIndex].data.length; //  The number of data in a series 

                var tipParams = {
    seriesIndex: seriesIndex};
                switch (chartType) {
    
                    case 'map':
                    case 'pie':
                    case 'chord':
                        tipParams.name = series[seriesIndex].data[dataIndex].name;
                        break;
                    case 'radar': //  Radar map 
                        tipParams.seriesIndex = seriesIndex;
                        tipParams.dataIndex = dataIndex;
                        break;
                    default:
                        tipParams.dataIndex = dataIndex;
                        break;
                }

                if (chartType === 'pie' || chartType === 'radar') {
    
                    //  Cancel the previously highlighted image 
                    chart.dispatchAction({
    
                        type: 'downplay',
                        seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
                        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
                    });

                    //  Highlight the current drawing 
                    chart.dispatchAction({
    
                        type: 'highlight',
                        seriesIndex: seriesIndex,
                        dataIndex: dataIndex
                    });
                }

                //  Show  tooltip
                tipParams.type = 'showTip';
                chart.dispatchAction(tipParams);

                dataIndex = (dataIndex + 1) % dataLen;
                if (options.loopSeries && dataIndex === 0 && !first) {
     //  The data index belongs to 0 Indicates that the current series of data has been cycled 
                    seriesIndex = (seriesIndex + 1) % seriesLen;
                }

                first = false;
            }

            showTip();
            timeTicket = setInterval(showTip, options.interval);
        }

        //  Turn off the rotation 
        function stopAutoShow() {
    
            if (timeTicket) {
    
                clearInterval(timeTicket);
                timeTicket = 0;

                if (chartType === 'pie' || chartType === 'radar') {
    
                    //  Unhighlight the drawing 
                    chart.dispatchAction({
    
                        type: 'downplay',
                        seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
                        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
                    });
                }
            }
        }

        var zRender = chart.getZr();

        function zRenderMouseMove(param) {
    
            if (param.event) {
    
                //  prevent canvas Mouse movement events on the bubble 
                param.event.cancelBubble = true;
            }

            stopAutoShow();
        }

        //  Leave echarts Resume automatic rotation when drawing 
        function zRenderGlobalOut() {
    
            if (!timeTicket) {
    
                autoShowTip();
            }
        }

        //  Mouse in echarts Stop the rotation when the picture is on 
        chart.on('mousemove', stopAutoShow);
        zRender.on('mousemove', zRenderMouseMove);
        zRender.on('globalout', zRenderGlobalOut);

        autoShowTip();

        return {
    
            clearLoop: function () {
    
                if (timeTicket) {
    
                    clearInterval(timeTicket);
                    timeTicket = 0;
                }

                chart.off('mousemove', stopAutoShow);
                zRender.off('mousemove', zRenderMouseMove);
                zRender.off('globalout', zRenderGlobalOut);
            }
        };
    };
})(window);

Use it directly

  //myChart.setOption(option);  Use directly behind 
  tools.loopShowTooltip(myChart, option, {
     loopSeries: true });

copyright notice
author[Time202051],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/175/202206240903258929.html

Random recommended