echarts 的饼图, 鼠标移动悬浮到某块儿上时该块儿的文字消失并且悬浮的模块高亮显示,如何移除该效果

echarts 的饼图, 鼠标移动悬浮到某块儿上时该块儿的文字消失并且悬浮的模块高亮显示,如何移除该效果,第1张

在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)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7879371.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存