Recently, I made a big screen project of data visualization. The big screen project of data visualization is generally less interactive, and the charts are generally added with automatic rotation. So I want to share with you my implementation

Steps:

1. Encapsulate the automatic multicast function and add it to the vUE instance prototype for global invocation.

For example:

Echarts_auto_tooltip

/** * echarts tooltip automatic carting * @param chart * @param chartOption * @param options * {* interval Carting interval, in milliseconds, Default: 2000 * loopSeries Boolean, false by default. * seriesIndex defaults to 0, and sets the series index in option to loop over the tooltip. * if loopSeries is true, execute from seriesIndex series. *} * @returns {{clearLoop: clearLoop}} */ export const autoToolTip = (chart, chartOption, options) => { // console.log('chart, chartOption, options',chart, chartOption, options) var defaultOptions = { interval: 2000, loopSeries: false, seriesIndex: 0, updateData: null }; if (! chart || ! chartOption) { return {}; } var dataIndex = 0; Var seriesIndex = 0; var seriesIndex = 0; Var timeTicket = 0; var seriesLen = chartOption.series.length; Var dataLen = 0; Var chartType; Var first = true; // seriesIndex specifies the series in which the tooltip will be displayed. If seriesIndex is not specified, the default is 0. If multiple series are specified, the default is the first series. Do you want to add the starting series index and the starting data index? 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; } / / seriesIndex is invalid if set, the default is 0 if (options. SeriesIndex < 0 | | options. SeriesIndex > = seriesLen) {seriesIndex = 0; } else { seriesIndex = options.seriesIndex; } function autoShowTip() {function showTip() {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; Var tipParams = {seriesIndex: seriesIndex}; switch (chartType) { case 'map': case 'pie': case 'chord': tipParams.name = series[seriesIndex].data[dataIndex].name; break; Case 'radar': // tipparams. seriesIndex = seriesIndex; tipParams.dataIndex = dataIndex; break; default: tipParams.dataIndex = dataIndex; break; } the if (chartType = = = 'pie' | | chartType = = = 'radar') {/ / cancel highlight graphic chart. DispatchAction ({type: 'downplay', seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex, dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1 }); // Highlight the current graph chart.dispatchAction({type: 'highlight', seriesIndex: seriesIndex, dataIndex: dataIndex}); } // display tooltip tipparams. type = 'showTip'; chart.dispatchAction(tipParams); dataIndex = (dataIndex + 1) % dataLen; if (options.loopSeries && dataIndex === 0 && ! SeriesIndex = (seriesIndex + 1) % seriesLen; } first = false; } showTip(); timeTicket = setInterval(showTip, options.interval); } function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket);} function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket); timeTicket = 0; If (chartType = = = 'pie' | | chartType = = = 'radar') {/ / cancel highlighting graphic 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) {function zRenderMouseMove(param) {if (param.event) {function zRenderMouseMove(param) {if (param.event) { } stopAutoShow(); } function zRenderGlobalOut() {if (! timeTicket) { autoShowTip(); } // Stop 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); }}; };Copy the code

3. Use the prototype-injected autoToolTip function in the component page and the wrapped $autoToolTip function after the setOption.

this.chart = this.$echarts.init(document.getElementById(this.id)); // ---------------------------------------------------------------- let options = {..... } //echarts configures this.chart.setoption (options) this.$autoToolTip(this.chart, options, {loopSeries: true})Copy the code

Conclusion: Any questions in the comments section

My CSDN address, intended to be transported: blog.csdn.net/weixin\_441…