柱状图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);
网友评论