柱狀圖tooltip自動(dòng)輪播
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: {// 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
? ? ? type: 'shadow'? ? ? ? // 默認(rèn)為直線，可選為：'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: ['民族','少兒','科技','美術(shù)','教育','萬卷','人民','春風(fēng)'],
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;//播放所在下標(biāo)
var faultByHourTime= setInterval(function() {//使得tootip每隔三秒自動(dòng)顯示
? myRank.dispatchAction({
type: 'showTip',// 根據(jù) tooltip 的配置項(xiàng)顯示提示框。
? ? seriesIndex: 0,
dataIndex: faultByHourIndex
});
faultByHourIndex++;
// faultRateOption.series[0].data.length 是已報(bào)名縱坐標(biāo)數(shù)據(jù)的長(zhǎng)度
? 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);
