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]
   },
   ]
 };


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
 },

实现效果

在这里插入图片描述

  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 ECharts饼图中实现环形渐变,可以使用 ECharts 的 `color` 属性来实现。以下是一个简单的示例代码: ```javascript option = { title: { text: '环形渐变饼图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 435, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#fbb962'}, {offset: 0.5, color: '#f37b1d'}, {offset: 1, color: '#f37b1d'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#00c2ff'}, {offset: 0.5, color: '#008cff'}, {offset: 1, color: '#008cff'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#6fde6f'}, {offset: 0.5, color: '#00c633'}, {offset: 1, color: '#00c633'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#f5d114'}, {offset: 0.5, color: '#e8b027'}, {offset: 1, color: '#e8b027'} ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#3bafff'}, {offset: 0.5, color: '#0072ff'}, {offset: 1, color: '#0072ff'} ]) ] } ] }; ``` 在这个示例中,我们的饼图有 5 个扇形,每个扇形都有一个渐变颜色。我们使用 `new echarts.graphic.LinearGradient` 方法创建了一个线性渐变,然后将其分配给每个扇形。线性渐变的参数分别为 `0, 0, 0, 1`,表示从上到下的垂直渐变。在 `color` 属性中,我们将每个扇形的颜色设置为线性渐变。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值