echarts封装让data数据自己动起来

一直循环播放 tooltip （data数据盒子）

function dynamic(echart,length) {
	//播放所在下标
	    let index = 0;
	    setInterval(function() {
	        echart.dispatchAction({
	            type: 'showTip',
	            seriesIndex: 0,
	            dataIndex: index
	        });
	        index++;
	        if(index > length) {
	            index = 0;
	        }
	    }, 1000);
	}

封装的data数据变换每次刷新都不同

	function random(max) {
	    let ran = Math.random()*max;
	    return parseInt(ran,10);
	}

#实例化option后面使用

dynamic(chart,4);
//{ chart： 获取html节点 。 4： 是data的数据量 eg: data: [‘1月’, ‘2月’, ‘3月’, ‘9月’] .}

具体使用如下：简单 柱形图 tooltip动起来可观性更加炫

	function chargePile() {
    	//严格意义上讲如果是vue就不能用init了！
	    let cpChart = echarts.init(document.querySelector(".charge-pile .chart"));
	    let cpOption = {
	        tooltip: {  //这里是平时鼠标移入就会出现data数据盒子，现在是自动循环播放这个盒子
	            trigger: 'axis',
	            axisPointer: {
	                type: 'line'
	            },
	            borderColor:'#363C44',
	            backgroundColor: "rgba(54,60,68,0.8)",
	            textStyle: {
	                color: "#fff"
	            }
	        },
	        grid: {
	            left: '3%',
	            right: '4%',
	            bottom: '3%',
	            containLabel: true
	        },
	        xAxis: {
	            type: 'category',
	            axisTick: {
	                alignWithLabel: true
	            },
	            axisLabel: {
	                show: true,
	                interval:0,
	                textStyle: {
	                    color: '#868792'
	                }
	            },
	            data: areaName,
	        },
	        yAxis: {
	            name: '单位：个',
	            nameTextStyle:{
	                color:"#038FBB"
	            },
	            type: 'value',
	            axisLabel: {
	                show: true,
	                textStyle: {
	                    color: '#868792'
	                }
	            },
	            axisTick: {
	                show: false
	            }
	        },
	        series: [
	            {
	                type: 'bar',
	                data: [
	                    random(250), random(250), random(250),
	                    random(250), random(250), random(250),
	                    random(250), random(250), random(250)
	                    //这里random是我封装的每次刷新data数据index都会发生改变
	                ],
	                itemStyle: {
	                    normal: {
	                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
	                            offset: 0,
	                            color: "#01ccfe" // 0% 处的颜色
	                        }, {
	                            offset: 0.5,
	                            color: "#08a4fa" // 50% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: "#1268f3" // 100% 处的颜色
	                        }], false)
	                    }
	                }
	            }
	        ]
	    };
	    cpChart.setOption(cpOption);
	    window.addEventListener("resize", function() {
	        cpChart.resize();
	    });
	    dynamic(cpChart,9);   //一直循环播放data数据，可观性非常棒！
	}