当前位置:   article > 正文

Echarts饼图,环形图,鼠标触碰后取消默认放大效果_echarts饼图鼠标移入环形效果

echarts饼图鼠标移入环形效果

项目场景:

项目场景:使用ecahrts 做一个环形图,但是鼠标触碰图例会有放大效果,根据高保真这个效果需要取消


问题描述

鼠标放上去有放大效果

问题1我想把这个放大效果取消,让后翻阅echarts的文档让后发现

let option={
   backgroundColor:"rgba(0,0,0,0)",
   color: datas.colors,
   grid: {
       bottom: "1%",
       top: "10"
   },
   series: [
   	{
       name: "", 
       type: "pie",
       radius: ["56%", "72%"],
       center: ["50%", "46%"],
       silent:'ture'//图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
       avoidLabelOverlap: false,
       legendHoverLink:false,
       label: { 
               show: false,
               position: "center",
       },
       labelLine: { 
           show: false ,
       },
       data:[100]
   },
   ]
 };


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

series-pie. silent
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

silent 使用之后出现了一些问题

问题描述

使用silent之后虽然放大效果取消了,但是顺手把提示框的效果也给弄没了
在这里插入图片描述

原因分析:

series-pie. silent
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

注意他说的不响应和触发鼠标事件,也就是说要想保留tooltip就不能使用silent

解决方案:

因为不能使用silent,我就仔细研读文档, 找到了另一种方法

在这里插入图片描述

 {
   name: "",
     clockwise: false, 
     type: "pie",
     radius: ["56%", "72%"],
     center: ["50%", "46%"],
     avoidLabelOverlap: false,
     legendHoverLink:false,
     // silent:true,取消了silent
     emphasis:{//使用emphasis
         disabled:false,
         scale:false,//不缩放
         scaleSize:0,//为了防止失效直接设置未0
     },
     label: { 
             show: false,
             position: "center",
     },
     labelLine: { 
         show: false ,
     },
     data: datas.dataArr
 },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

实现效果

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/105527
推荐阅读