ECharts 图表导出

Echarts图形是由Javascript亲自在前端网页上绘制的

1.用ECharts配置项手册中的toolbox.feature.saveAsImage

复制代码
toolbox: {
  show: true,
  feature: {
    saveAsImage: {
    show:true,
    excludeComponents :['toolbox'],
    pixelRatio: 2
    }
  }
}
//写在option中,这样会在图形右上角产生一个保存为图片的标识,点击即可下载图片,这种方法试用于网站点击保存的需求
复制代码

2.用ECharts实例方法getImage(这种方法得到的picInfo为[object HTMLImageElement],无法通过Ajax传递到后台处理,只能用于显示)

这个功能在ECharts3中好像已经舍弃,作者用ECharts3没有出现任何效果,换成ECharts2的js文件才可以运行

myChart.setOption(option);
var picInfo = myChart.getImage();

//用来展示是否成功
onload=function f(){
  document.getElementById("pic").appendChild(picInfo);
  //document.getElementById("pic").innerHTML = picInfo;
}

3.用ECharts实例方法getDataURL(实现图片自动保存)

myChart.setOption(option);
var picInfo = myChart.getDataURL();

//getDataURL仍然要放在setOption方法生成一个简单的图形之后,现在我们得到的picInfo是一串base64信息,我们可以将picInfo用Ajax传递到后台处理

4.后台保存图片

方法1.参考:https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.image.save?view=netframework-4.7.2#System_Drawing_Image_Save_System_String_(需要版本要求较高)

方法2:

复制代码
/// <summary>
        /// 无损保存图片
        /// </summary>
        /// <param name="imgResult">图片</param>
        /// <param name="Path">保存的路径</param>
        /// <param name="ImageType">图片的类型,image/jpeg,image/png,image/gif,image/tiff,image/bmp</param>
        /// <returns></returns>
        public bool SaveImage(Image imgResult, string Path, string ImageType)
        {
            EncoderParameter p;
            EncoderParameters ps;
            try
            {
                ps = new EncoderParameters(1);

                p = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
                ps.Param[0] = p;

                ImageCodecInfo ii = GetCodecInfo(ImageType);
                imgResult.Save(Path, ii, ps);
                imgResult.Dispose();
            }
            catch (Exception ex)
            {
                return false;
            }
            return true;
        }

        /// <summary>
        /// 获取图片的编码类型
        /// </summary>
        /// <param name="mimeType"></param>
        /// <returns></returns>
        public ImageCodecInfo GetCodecInfo(string mimeType)
        {
            ImageCodecInfo[] CodecInfo = ImageCodecInfo.GetImageEncoders();
            foreach (ImageCodecInfo ici in CodecInfo)
            {
                if (ici.MimeType == mimeType) return ici;
            }
            return null;
        }
复制代码

 参考:https://www.jianshu.com/p/f5359864fa4f

posted @   Tozhang  阅读(15928)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示