echarts动态展示气泡提示框（tooltip）数据

直接上栗子

	 this.lineChart = echarts.init(document.getElementById('lineMain'));
                    let option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                            
                                let str = params[0].name + '</br>' + '产量：' + params[0].value;

                                return str
                            },
                        },
                        grid: {
                            top: '15%',
                            left: '10%',
                            right: '10%',
                            bottom: '1%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            axisLine: {
                                show: true
                            },
                            splitArea: {
                                // show: true,
                                color: '#f00',
                                lineStyle: {
                                    color: '#f00'
                                },
                            },
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                show: false
                            },
                            boundaryGap: false,
                            data:['04-22', '04-23', '04-24', '04-25', '04-26', '04-27', '04-28', '04-29'],
                        }],
                        yAxis: [{
                            type: 'value',
                            min: 0,
                            splitNumber: 4,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.1)'
                                }
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                                margin: 20,
                                textStyle: {
                                    color: '#d1e6eb',
                                },
                            },
                        }],
                        series: [{
                            type: 'line',
                            smooth: true, //是否平滑
                            symbol: 'circle',
                            symbolSize: 5,
                            lineStyle: {
                                normal: {
                                    color: "#00ca95",
                                    shadowColor: 'rgba(0, 0, 0, .3)',
                                    shadowBlur: 0,
                                    shadowOffsetY: 5,
                                    shadowOffsetX: 5,
                                },
                            },
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#00ca95',
                                }
                            },
                            itemStyle: {
                                color: "#00ca95",
                                borderColor: "#fff",
                                borderWidth: 3,
                                shadowColor: 'rgba(0, 0, 0, .3)',
                                shadowBlur: 0,
                                shadowOffsetY: 2,
                                shadowOffsetX: 2,
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0,202,149,0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,202,149,0)'
                                    }
                                    ], false),
                                    shadowColor: 'rgba(0,202,149, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                          
                            data: [12, 34, 56, 78, 87, 34, 43，56]
                        }]
                    };
                    this.lineChart.setOption(option);
                   
                    let app = {
                        currentIndex: -1,
                    };
                    let that = this;
                   
                    if (this.lineChartInterval) {
                        window.clearInterval(that.lineChartInterval)
                    }
                    this.lineChartInterval = setInterval(function () {
                        let dataLen = option.series[0].data.length;
                        // 取消之前高亮的图形
                        that.lineChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex
                        });
                        app.currentIndex = (app.currentIndex + 1) % dataLen;
                        //console.log(app.currentIndex);
                        // 高亮当前图形
                        that.lineChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex,
                        });
                        // 显示 tooltip
                        that.lineChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 0,
                            dataIndex: app.currentIndex
                        });
                    }, 2000);

每隔 2s 气泡提示框（tooltip）就会展示下一个数据信息