Echarts 环形图 默认高亮展示某个数据
2018-06-24 02:08:33来源:未知 阅读 ()
项目中有个图标类的需求,环形图高亮第一条数据.要求第一条数据图块默认展示:
分析:想要获得上图效果需要一下条件
1,进入页面可以触发第1条数据的选中action
2,鼠标指向别的图块时,展示选中数据的图块信息
3,鼠标离开环形图时,展示默认第一条数据
在echarts上找寻文档得知:
action -> dispatchAction 可以手动触发action.
通过[分析]得出的条件,我们可以对相应动作做出控制.
1,进入页面可以触发第1条数据的选中action
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
type 触发action类型
seriesIndex series索引
dataIndex 高亮数据索引
具体可以参考echarts官方文档
注意,不可以使用 type: 'pieSelect
',该种类型会使得选中的色块发生向外的位移,并且不会展示label内容.
2,鼠标指向别的图块时,展示选中数据的图块信息,隐藏默认色块高亮信息
myChart.on('mouseover',(v) => { if($scope.initFlag && v.dataIndex != 0){ myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } });
注意:当鼠标在默认色块时,无需触发取消高亮[downplay]事件
3,鼠标离开环形图时,展示默认第一条数据
myChart.on('mouseout',(v) => { if($scope.initFlag){ myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0}); } });
当鼠标移除时,别忘记再次触发饼图的默认展示.
另外,如果想展示tooltip的话,用type = showTip 也是可以的.
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:css中的相对定位与绝对定位
- ECharts安装与使用 2020-05-26
- ECharts介绍 2020-05-26
- 阻止表单的默认提交事件 2020-05-23
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
- Echarts快速入门 2020-04-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash