经过中午近两个小时的努力，终于可以实现了：echart 图表 在.net中生成图片

以下源代码：

前台页面：

<!DOCTYPE html>
<html>
<head>
    <title>生成图片</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
    <div class="maincontent">
        <div id="chart0" style="height: 400px;" class="l chart w-50"></div>
    </div>

<!-- ECharts单文件引入 -->
    <script type="text/javascript" src="/statics/js/com/jquery-1.8.2.min.js"></script>
    <script src="/statics/plugins/com/Echarts/build/dist/echarts.js" type="text/javascript"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '/statics/plugins/com/ECharts/build/dist'
            }
        });
        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var datas = [

{
                            animation: false,//为true，则生不出完整的图片
                            title: {
                                text: '世界人口总量',
                                subtext: '数据来自网络'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['2011年', '2012年']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: { show: true },
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'value',
                                    boundaryGap: [0, 0.01]
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'category',
                                    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
                                }
                            ],
                            series: [
                                {
                                    name: '2011年',
                                    type: 'bar',
                                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                                },
                                {
                                    name: '2012年',
                                    type: 'bar',
                                    data: [19325, 23438, 31000, 121594, 134141, 681807]
                                }
                            ]
                        }

];
                    $('.chart').each(function (i, n) {
                        var myChart = ec.init(document.getElementById('chart' + i));
                        // 为echarts对象加载数据
                        myChart.setOption(datas[i]);
                        var data = "ImageSend=" + encodeURI(myChart.getDataURL("png"));
                        $.ajax({
                            type: "post",
                            url: "/ajax/save.aspx",
                            data: "action=saveImage&" + data,
                            cache: false,
                            success: function (msg) {

}
                        });
                    });
                }
            );
    </script>

</body>

</html>

后台ajax代码：

using DataService.Framework.BaseFramework.Helper;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Autofac;
using DataService.Framework.Ioc;
using System.Collections;
using System.IO;
using System.Text;

public partial class ajax_save : System.Web.UI.Page
{
    private string strAction = "";
    public ajax_save()
    {
        strAction = RequestHelps.Post("action");
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (strAction != null && strAction.Trim() != "")
        {
            switch (strAction)
            {
                case "saveImage":
                    SaveImage();
                    break;
            }
        }
    }
    /// <summary>
    /// 修改问卷皮肤
    /// </summary>
    protected void SaveImage()
    {
        int returnid = 0;
        string ImageSend = RequestHelps.Post("ImageSend");
        ImageSend=Server.UrlDecode(ImageSend);
             ImageSend = ImageSend.Replace(" ", "+");
              try {
                  string[] url = ImageSend.Split(',');
                  string u = url[1];
                  // Base64解码
                  byte[] b = Convert.FromBase64String(u);
                string name = "E:\\12.png";
                FileHelper.ByteStreamToFile(name, b);
              } catch (Exception e) {

}

System.Web.HttpContext.Current.Response.Write(returnid.ToString());
        System.Web.HttpContext.Current.Response.End();
    }
}

//二进制数组Byte[]生成文件
        public static bool ByteStreamToFile(string createFileFullPath, byte[] streamByte)
        {
            if (!File.Exists(createFileFullPath))
            {
                FileStream fileStream = File.Create(createFileFullPath);
                fileStream.Write(streamByte, 0, streamByte.Length);
                fileStream.Close();
                return true;
            }
            return false;
        }

echart 图表 在.net中生成图片的方法的更多相关文章

  1. 在同一页面中显示多个echart图表

    整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...

  2. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  3. PHP使用内置函数生成图片的方法详解

    原文地址:http://www.poluoluo.com/jzxy/201605/475301.html 本文实例讲述了PHP使用内置函数生成图片的方法.分享给大家供大家参考,具体如下: 第一步:创建 ...

  4. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  5. v-if和updated钩子结合使用 渲染echart图表

    项目需求是这样的,用户可以自定选择echart 曲线图 是横向还是竖向显示.我的做法是 写了一个横向的echart图表,也写了一个竖向的echart图表,然后两者共用存在store里的图表数据,就能实 ...

  6. 清除LabVIEW中波形图表或波形图中的历史数据

    清除LabVIEW中波形图表或波形图中的历史数据 方法一: 前面板中右键单击波形图表或波形图,选择数据操作>>清除图表或数据操作>>清除图形 方法二:(编程方法) 用于清除图表 ...

  7. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  8. java 执行 jar 包中的 main 方法

    java 执行 jar 包中的 main 方法 通过 OneJar 或 Maven 打包后 jar 文件,用命令: java -jar ****.jar执行后总是运行指定的主方法,如果 jar 中有多 ...

  9. 为什么不能在init和dealloc函数中使用accessor方法

    前言 为什么不要在init和dealloc方法中调用getter和setter:Apple在Mac与iOS中关于内存管理的开发文档中,有一节的题目为:"Don'tUse Accessor M ...

随机推荐

  1. CSQuery 简单测试

    1. 使用环境 vs2010  ,csquery 2. 测试的内容 学习了解csquery 3. 代码 添加csquery 的就不用写了 测试的例子是获取我的博客的信息,使用webbrowser 控件 ...

  2. Win7系统上配置使用Intellij Idea 13的SVN插件

    Win7系统上配置使用Intellij Idea 13的SVN插件 http://blog.csdn.net/jeepxiaozi/article/details/39856081

  3. ASP.NET 4.0的ClientIDMode属性

    时光流逝,我们心爱的ASP.NET也步入了4.0的时代,微软在ASP.NET 4.0中对很多特性做了修改.比如我将要讨论的控件ID机制就是其中之一. 在ASP.NET 4.0之前我们总是要为控件的Cl ...

  4. OC—设计模式-通知的使用

    通知 通知(广播) 可以一对多的发送通知(一个发送者 多个观察者) 特别注意:在发送者 发送通知的时候,必须有观察者 发送者,就是注册一个通知中心,以他为中心,发送消息 通过通知的名字,来判断是哪个通 ...

  5. ICSharpCode.SharpZipLib.dll，MyZip.dll,Ionic.Zip.dll 使用

    MyZip.dll : 有BUG,会把子目录的文件解压到根目录.. ICSharpCode.SharpZipLib.dll: 把ICSharpCode.SharpZipLib.dll复制一份,重命名为 ...

  6. php 自带函数

    memory_get_usage()://查看当前内存使用情况单位 bytes str_repeat("liuhui", 2);//字符串重复指定次数,liuhui重复2次

  7. 通过[蜘蛛协议]Robots.txt禁止搜索引擎收录的方法

      什么是robots.txt文件? 搜索引擎通过一种程序robot(又称spider),自动访问互联网上的网页并获取网页信息. 您可以在您的网站中创建一个纯文本文件robots.txt,在这个文件中 ...

  8. request的生命周期

    有如下功能: 从index.jsp页面点击超链接进入TestServlet服务器,TestServlet服务器再请求转发到test.jsp. 在index.jsp里设置了request的attribu ...

  9. DatagridView 最后编辑状态数据无法自动提交的问题

    DataGridView1.CurrentCell = null 从一个帖子上看的,绝招! http://bbs.csdn.net/topics/120020614

  10. item2，实现singleton模式

    单例模式? 只能实现一个实例的类成为单例. ============== muduo库中单例模式实现 #include<boost/noncopyable.hpp> //#include ...