在series里设置hoverAnimation:false,鼠标移入悬浮饼图模块都不会高亮放大,具体步骤如下:
1、例如下图的饼图,实现右图鼠标悬停部分不被高亮放大。
2、先将radius设置比例改小,防止设置完成依然看起来比较大。
3、然后设置hoverAnimation为false。
4、任何访问来源都禁止悬停高亮显示效果。
5、然后回到第一步刷新一下,鼠标悬浮到饼图模块时不会被高亮显示。
柱状图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)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)