[GitHub] fangbinwei opened a new issue #9223: Think about simulating click event of legend

[GitBox <gi...@apache.org>]

fangbinwei opened a new issue #9223: Think about simulating click event of legend
URL: https://github.com/apache/incubator-echarts/issues/9223
 
 
   <!--
   为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   因为有需求要点击legend之后, 响应点击事件, 但是了解到legend并没用`click`事件, 在`selectedMode`为`true`的情况下#6266, 可以监听事件来实现自定义的操作, 但是select操作本身有默认的隐藏图表的行为.
   
   所以我在`legendselectchanged`事件中出发`legendSelect` action #1081, 在点击legend之后, 又重新将全部的legend选中, 但是这就相当于先隐藏图表, 又重新将图表显示, 这样hack了`click`事件, 但是副作用就是点击legend, 图表会有动画, 除非设置`animation: false`禁掉动画.
   ### Version & Environment [版本及环境]
   + ECharts version [4.1.0.rc2]:
   + Browser version [chrome69.0.3497.100]:
   + OS Version [macos]:
   
   
   ### Expected behaviour [期望结果]
   想了解兼顾图表动画的同时, 又能实现legend`click`的思路#3564
   
   
   
   
   ### ECharts option [ECharts配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   option = {
   tooltip: {
           trigger: 'item',
           formatter: "{a} <br/>{b}: {c} ({d}%)"
       },
       legend: {
           orient: 'vertical',
           x: 'left',
           data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
       },
       series: [
           {
               name:'访问来源',
               type:'pie',
               radius: ['50%', '70%'],
               avoidLabelOverlap: false,
               //hoverAnimation: false,
               //animation: false,
               label: {
                   normal: {
                       show: true,
                       position: 'center',
                       textStyle: {
                           fontSize: '30',
                           fontWeight: 'bold'
                       },
                       formatter: 'center text',
                       color: '#000'
                   }
               },
               labelLine: {
                   normal: {
                       show: false
                   }
               },
               data:[
                   {value:335, name:'直接访问'},
                   {value:310, name:'邮件营销'},
                   {value:234, name:'联盟广告'},
                   {value:135, name:'视频广告'},
                   {value:1548, name:'搜索引擎'}
               ]
           }
       ]
   }
   
   ```
   
   
   
   
   ### Other comments [其他信息]
   #### 附上demo
   [jsfiddle地址](https://jsfiddle.net/fangbinwei/uye7vpt9/17/)
   <!-- For example: Screenshot or Online demo -->
   <!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org