Echarts-2.2.7中统计出来的统计图保存为图片

今天在做一个图形报表,有个需求是要把展现的统计图保存为图片, 图形报表用的Echarts-2.2.7,

以前有用过 Echarts,记得echarts插件是可以帮助我们把统计图保存为图片的。

只是不记得是怎么配置了,查看API文档很久也没有找到,最后在 文档/配置项手册 里面找到了配置方法 和配置 参数。

下图是 Echarts官网 实例中的配置:

下面来说说配置保存图片的步骤:

1.保存图片是Echarts的一个工具,先找到工具箱

  

toolbox

工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。

2. 然后再找到 各工具的配置项

  

toolbox.feature Object

各工具配置项。

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

3. 再找到保存图片的配置

toolbox.feature.saveAsImage Object

保存为图片。

4. 再看到了保存图片的配置项有的属性 和可填 参数

toolbox.feature.saveAsImage.type string

[ default: ‘png‘ ]

保存的图片格式。支持 ‘png‘‘jpeg‘

toolbox.feature.saveAsImage.name string

保存的文件名称,默认使用 title.text 作为名称。

toolbox.feature.saveAsImage.backgroundColor Color

[ default: ‘auto‘ ]

保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色。

toolbox.feature.saveAsImage.excludeComponents Array

[ default: [‘toolbox‘] ]

保存为图片时忽略的组件列表,默认忽略工具栏。

toolbox.feature.saveAsImage.show boolean

[ default: true ]

是否显示该工具。

toolbox.feature.saveAsImage.title boolean

[ default: ‘保存为图片‘ ]

toolbox.feature.saveAsImage.icon *

Icon 的 path 字符串,ECharts 3 中支持使用自定义的 svg path 作为 icon,格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

toolbox.feature.saveAsImage.iconStyle Object

保存为图片 icon 样式设置。

toolbox.feature.saveAsImage.pixelRatio number

[ default: 1 ]

保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2。

5. 然后根据 自己的需求去配置就好了

6.查看文档库 截图

7. 项目的 JS 代码

require(
                          [
                           ‘echarts‘,
                           ‘echarts/chart/bar‘   // 按需加载所需图表
                           ],
                           function (ec) {
                            // 基于准备好的dom,初始化echarts图表
                            var myChart1 = ec.init(document.getElementById(‘pro-price-main‘));
                            option1 = {
                                 title : {
                                    text: ‘文档数量(单位:个)‘,
                                    textStyle: {
                                        fontWeight: ‘normal‘,
                                        fontSize: ‘15‘,
                                        color: ‘#999‘
                                    },
                                    x: 54
                                },
                                tooltip : {
                                    show: true,
                                    trigger: ‘item‘,
                                },
                                legend: {
                                    x: ‘center‘,
                                    y: 0,
                                    orient : ‘horizontal‘,
                                    itemGap: 20,
                                    itemWidth: 30,
                                    itemHeight : 20,
                                    textStyle: {
                                        color: ‘#999‘
                                    },
                                    data:[‘文库总数‘,‘文库增长数‘]
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        magicType: {
                                            type: [‘stack‘, ‘tiled‘]
                                        },
                                        dataView: {show:true},
                                        saveAsImage: {
                                            show:true,
                                            excludeComponents :[‘toolbox‘],
                                            pixelRatio: 2
                                            
                                        }
                                    }
                                },
                                calculable : true,
                               
                                xAxis : [
                                    {
                                        type : ‘category‘,
                                        show: true,
                                        splitLine: false,
                                        axisLine: {
                                            lineStyle: {
                                                width: 1,
                                                color: ‘#f2f2f2‘
                                            }
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                align: ‘center‘,
                                                color: ‘#999‘
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        data : result.results["docMonthData"]  
                                    }
                                ],
                                yAxis : [
                                    {
                                        type : ‘value‘,
                                        show: true,
                                        splitLine: {
                                            lineStyle: {
                                                color: [‘#f2f2f2‘],
                                                width: 1,
                                            }
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                width: 1,
                                                color: ‘#f2f2f2‘
                                            }
                                        },
                                        axisLabel: {
                                            textStyle: {
                                                color: ‘#999‘
                                            }
                                        }
                                    }
                                ],
                                series : [
                                    {
                                        name:‘文库总数‘,
                                        type:‘bar‘,
                                        stack: ‘总量‘,
                                        data: result.results["docTotalData"],
                                        itemStyle: {
                                            normal: {
                                                color: ‘#7266ba‘
                                            }
                                        }
                                    },
                                    {
                                        name:‘文库增长数‘,
                                        type:‘bar‘,
                                        stack: ‘总量‘,
                                        itemStyle: {                // 系列级个性化
                                            normal: {
                                                color: ‘#f9d21a‘
                                            }
                                        },
                                        data: result.results["growthNumData"]
                                    }
                                ]
                            };
                            // 为echarts对象加载数据
                            myChart1.setOption(option1);
                          }
                      );

时间: 08-11

Echarts-2.2.7中统计出来的统计图保存为图片的相关文章

Android将view保存为图片并放在相册中

在Android中,可以将view保存为图片并放在相册中,步骤为 view->bitmap->file,即先将view转化为bitmap,再将bitmap保存到相册中. 需要将红框标注的view转化为图片并保持到相册中.view的XML代码为 <RelativeLayout android:id="@+id/lanjing_code_rl" //要保存的view id android:layout_width="match_parent" andr

10.16输入一个字符串,内有数字和非数字字符,如: a123x456 17960? 302tab5876 将其中连续的数字作为一个整数,依次存放到一数组num中。例如123放在num[0]中,456放在num[1]中……统计共有多少个整数,并输出这些数。

10.16输入一个字符串,内有数字和非数字字符,如: a123x456 17960? 302tab5876 将其中连续的数字作为一个整数,依次存放到一数组num中.例如123放在num[0]中,456放在num[1]中--统计共有多少个整数,并输出这些数. #include <stdio.h> int main(){ void search(char * parr, int * pnum); char arr[100],* parr; int num[30],* pnum; parr=arr;

java学习,从一个字符串中统计同一类型出现的次数

1.从字符串“AS345asdzf*())sddsWE”中统计大写字母.小写字母.其他类型的出现的次数 String s="AS345asdzf*())sddsWE"; int l = 0,b=0,o=0; for(int i=0;i<s.length();i++){ char t= s.charAt(i);//charAt返回索引值 if(t>='a'&&t<='z'){//判断是否为小写字母 l++; }else if(t>='A'&

在floodlight控制器中统计进入packed-in数量的代码(sdn)

<p class="NewStyle15"><span style="font-family: 'Times New Roman'; letter-spacing: 0pt; font-size: 10.5pt;"><o:p></o:p></span></p><p class="NewStyle15" style="text-indent:24.0000pt;

08-在字符串中统计子串出现的次数

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Text.RegularExpressions; namespace _05在字符串中统计子串出现的次数 { class Program { static void Main(string[] args) { int count = SubstringCount("qhwerzdfrefysasefh

SQL Server 中统计信息直方图中对于没有覆盖到谓词预估以及预估策略的变化(SQL2012--&gt;SQL2014--&gt;SQL2016)

原文:SQL Server 中统计信息直方图中对于没有覆盖到谓词预估以及预估策略的变化(SQL2012-->SQL2014-->SQL2016) 本文出处:http://www.cnblogs.com/wy123/p/6770258.html 统计信息写过几篇了相关的文章了,感觉还是不过瘾,关于统计信息的问题,最近又踩坑了,该问题虽然不算很常见,但也比较有意思.相对SQL Server 2012,发现在新的SQL Server版本(2014,2016)中都有一些明显的变化,下文将对此进行粗浅的

(sdn)在floodlight控制器中统计进入packed-in数量的代码(改)

在floodlight控制器中统计进入packed-in数量的代码: package edu.wzu.steve.trafficanalyser; import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; import org.restl

MySQL 8.0 中统计信息直方图的尝试

直方图是表上某个字段在按照一定百分比和规律采样后的数据分布的一种描述,最重要的作用之一就是根据查询条件,预估符合条件的数据量,为sql执行计划的生成提供重要的依据. 在MySQL 8.0之前的版本中,MySQL仅有一个简单的统计信息却没有直方图,没有直方图的统计信息可以说是没有任何意义的. MySQL 8.0新特性之一就是开始支持统计信息的直方图,这个概念很早就提出来了,抽空具体尝试了一下使用方法. 之前写过MSSQL相关统计信息的一点东西,在原理上都是一致的, 照旧,直接上例子,造数据,创建一

【未解决】对于使用Windows的IDEA进行编译的文件,但无法在Linux系统中统计代码行数的疑问

在我学习使用Windows的IDEA的过程中,将代码文件转移到Linux虚拟机当中,但无法在Linux系统中统计代码行数. 注意:拷贝进虚拟机的文件均全能编译运行. 具体过程如下: root@yogile-VirtualBox:/alive/string# ls bin/ docs/ statistics.sh string/ work/ ##/shared/为虚拟机与宿主机的共享文件夹 root@yogile-VirtualBox:/alive/string# cp -r /shared/id