账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    echarts3 legend禁止点击事件,允许悬浮事件
    • 见心书画许老师187533751612020-01-01 00:00
    • 11
    136
    0

    最近做一个环形图,希望legend图例禁止点击事件,允许悬浮事件
    试了selectedMode:false 两个事件全都被禁掉了
    然后尝试了legendselectchanged事件,还是会触发默认的点击事件
    有木有大佬有解决方案啊

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 喲丿妞你赞 普通会员 1楼

      在ECharts 3中,如果你想要禁用鼠标点击事件,而允许悬浮事件(通常是通过在图表元素上使用<g>元素中的clicktouchstart事件绑定的on属性实现的)来触发点击事件,可以使用以下方法:

      ```javascript import echarts from 'echarts';

      // 创建一个ECharts实例 const chart = echarts.init(document.getElementById('myChart'));

      // 创建一个悬浮事件监听器 chart.on('觸發悬浮', function() { // 避免点击事件的触发 chart.dispatchAction({ type: 'scatter', data: { name: '数据集', series: [{ name: 'Series 1', type: 'scatter', data: [{ name: '点 1', coordinates: [0, 0], type: 'scatter', data: [{name: '点 1', coordinates: [1, 1]}], }] }, { name: 'Series 2', type: 'scatter', data: [{ name: '点 2', coordinates: [0, 1], type: 'scatter', data: [{name: '点 2', coordinates: [1, 0]}], }] }] }, effect: { radius: 0, blur: 0, shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0)', shadowOffset: 0 } }); }); ```

      在这个例子中,我们首先创建了一个ECharts实例,然后在on属性中定义了一个事件监听器,监听<g>元素上的clicktouchstart事件。在这个监听器中,我们使用dispatchAction方法创建了一个scatter事件,并设置了以下属性:

      1. type属性:设置事件类型为scatter,表示我们将处理的图表数据类型为散点图。
      2. data属性:设置事件数据,其中包含两个系列(Series 1Series 2)和一个数据点数组。
      3. effect属性:设置事件效果,包括radiusblurshadowBlurshadowOffsetXshadowOffsetYshadowColor属性,分别对应radiusblurshadowBlurshadowOffsetXshadowOffsetYshadowColor的缩放级别。radius属性用于设置悬停点的半径,blur属性用于设置悬停点的模糊程度,shadowBlur属性用于设置悬停点的模糊范围,shadowOffsetXshadowOffsetYshadowColor属性用于设置悬停点的阴影范围和颜色。
      4. effectRadius属性:设置悬停事件效果的半径,例如0表示不设置效果,radius值越大,半径越小,效果越明显。

      在事件触发时,ECharts会将该事件发送到ECharts的dispatchAction方法,这个方法会触发相应的事件处理函数。在这个事件处理函数中,我们创建了一个scatter事件,并设置了以下属性:

      1. type属性:设置事件类型为scatter,表示我们将处理的图表数据类型为散点图。
      2. data属性:设置事件数据,与在on属性中设置的一样。
      3. effect属性:设置事件效果,与在on属性中设置的一样。

      通过这种方式,我们可以在ECharts中禁用鼠标点击事件,而允许悬浮事件来触发点击事件,从而实现我们想要的效果。请注意,由于ECharts会将悬停事件效果发送到dispatchAction方法,因此在处理悬停事件时,需要保证effect属性中设置的值与ECharts的相关配置保持一致。例如,如果ECharts设置了一个scatter效果,而你的悬浮事件效果不支持scatter效果,那么你需要在effect属性中设置一个与scatter效果相反的属性,例如effectRadius

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部