echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮

echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright  蕃薯耀 2017年2月8日 星期三

http://www.cnblogs.com/fanshuyao/

一、echarts内置按钮

echarts按钮在工具栏。

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。如下图所示：

按钮的配置在toolbox下的feature属性

http://echarts.baidu.com/option.html#toolbox

1、保存为图片：saveAsImage

文档见：http://echarts.baidu.com/option.html#toolbox.feature.saveAsImage

2、数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新：dataView

文档见：http://echarts.baidu.com/option.html#toolbox.feature.dataView

其它的不再说了，自己到官网看文档

下面的代码显示下载图片按钮及数据视图按钮：

1. toolbox: {
2. //show: true,
3. itemSize: 20,
4. itemGap: 30,
5. right: 50,
6. feature: {
7. dataView: {show:true},
8. saveAsImage: {
9. //excludeComponents :['toolbox'],
10. pixelRatio: 2
11. }
12. }
13. }

二、echarts自定义按钮

除了各个内置的工具按钮外，还可以自定义工具按钮。

注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：

1. {
2. toolbox: {
3. feature: {
4. myTool1: {
5. show: true,
6. title: '自定义扩展方法1',
7. icon: 'image://http://echarts.baidu.com/images/favicon.png',
8. onclick: function (){
9. alert('myToolHandler1')
10. }
11. },
12. myTool2: {
13. show: true,
14. title: '自定义扩展方法',
15. icon: 'image://http://echarts.baidu.com/images/favicon.png',
16. onclick: function (){
17. alert('myToolHandler2')
18. }
19. }
20. }
21. }
22. }

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright  蕃薯耀 2017年2月8日 星期三

http://www.cnblogs.com/fanshuyao/