Echarts的轮播实现方案

需求：饼图实现轮播；

场景：电视大屏监控，自动高亮数据，有动画效果，增强页面可竖仿视性；

实现丛吵：

主要运用 dispatchAction ，主动触发事件。

ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会余郑纤触发，还有一种是 调用 dispatchAction 后触发的事件。每个 action 都会有对应的事件，具体见 action 和 events 的文档。

主要用到了ECharts 中的鼠标事件事件： mouseover 和 mouseout

优化完成。

需求：echarts中需要轮播展示不同的线性图，局谨乱几张图的横纵坐标数据都不一样

方法：通过timeLine设置时间轴进行跳转 https://www.makeapie.com/editor.html?c=xsHh439K0 我是在这个基础上得到启发的

如图所示，这是两张图通过timeLine进晌袭行桐档切换的，页面样式参考的 https://www.makeapie.com/editor.html?c=xS9Oh_JY06

这两张图在切换的同时还要满足图中的数据进行轮播展示（这里用到定时器触发dispatchAction，可以参考我的这篇 https://www.jianshu.com/p/2f5f337b01be ）

柱状图tooltip自动轮播

let myRank= this.$echarts.init(this.$refs.rank)

let option={

legend: {

data: [{

name: '销售总量',

icon: 'circle'

    }],

textStyle: {

color: '#fff',

fontSize: 14,

fontFamily: 'PingFangSC',

fontWeight: 300

    }

},

tooltip: {

show:true,

trigger: 'axis',

axisPointer: {// 坐标轴指示器团铅郑，坐标轴触发有效

      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

    }

},

grid: [

{

height: 240,

top: 45,

left:100,

width: 420,

},

{

height: 240,

width: 420,

top: 45,

left:100,

}

],

xAxis: {

name: "（万元）",

nameTextStyle: {

color: '#fff',

fontSize: 16

 激亮   },

axisLine: {

lineStyle: {

color: '#0177d4'

      }

},

axisLabel: {

color: '#fff',

fontSize: 16

    },

splitLine: {

show:false,

lineStyle: {

color: '#0177d4'

      }

},

interval:30,

max:120

  },

yAxis: {

data: ['民族','少儿','科技','美术','教育','万卷','人民','春风'],

axisLine: {

lineStyle: {

color: '#0177d4'

      }

},

axisLabel: {

color: '#fff',

fontSize: 14

    }

},

series: [{

name: '销售总量',

type: 'bar',

barWidth: 18,

itemStyle:{

normal:{

color:new this.$echarts.graphic.LinearGradient(0,0,0,1, [{

offset: 0,

color: '#00b0ff'

        }, {

offset: 0.8,

color: '#7052f4'

        }],false)

}

},

data: [1.0,1.63,1.66,1.86,10.80,12.69,30.34,118.0]

}]

}

var faultByHourIndex= 0//播放所在下标

var faultByHourTime= setInterval(function() {//使得tootip每隔三秒自动显示

  myRank.dispatchAction({

type: 'showTip',// 根据 tooltip 的配置塌颂项显示提示框。

    seriesIndex: 0,

dataIndex: faultByHourIndex

})

faultByHourIndex++

// faultRateOption.series[0].data.length 是已报名纵坐标数据的长度

  if (faultByHourIndex>= option.series[0].data.length) {

faultByHourIndex= 0

}

},3000 )

myRank.setOption(option)

饼状图高亮

var count= 0

app.timeTicket= setInterval(function () {

myPeople.dispatchAction({

type: 'downplay',

seriesIndex: 0

  })

myPeople.dispatchAction({

type: 'highlight',

seriesIndex: 0,

dataIndex: (count++)% 10

  })

},1000)

---