经过中午近两个小时的努力，终于可以实现了：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. windows下android开发环境搭建

    JDK的安装和Java环境变量的设置 1 JDK下载地址 JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.h ...

  2. no ocijdbc11 in java.library.path linux

    no ocijdbc11 in java.library.path linux vi /etc/profile export ORACLE_HOME=/oracle/database/oracle/p ...

  3. 【jmeter】测试报告优化<一>

    具体问题如下: 1.Date report这里的时间没有正确显示出来 2.Summary里的字段Min Time和Max Time显示的是NaN,没有显示正确的时间. 本文主要解决上述两个问题,具体报 ...

  4. Async 和 Await的性能(.NET4.5新异步编程模型)

    异步编程长时间以来一直都是那些技能高超.喜欢挑战自我的开发人员涉足的领域 — 这些人愿意花费时间,充满热情并拥有心理承受能力,能够在非线性的控制流程中不断地琢磨回调,之后再回调. 随着 Microso ...

  5. LwIP情景示例

    1. 你使用UDP作为探测包,但被探测的主机不在网络上. 在发送UDP packet之前,LwIP要将其保存下来(分配一个RAM类型的pbuf),并首先发送ARP Request,但得不到回应.如果你 ...

  6. gdb: multiple process debug

    gdbserver自身不支持multiple process:如果你调试parent process时在子进程上下断点,子进程在运行到那个断点时就会SIGTRAP. 如果你要调试fork出来的子进程: ...

  7. MySQL使用位运算

    通常 我们的数据表中 可能会包含各种状态属性, 例如 blog表中,我们需要有字段表示其是否公开,是否有设置密码,是否被管理员封锁,是否被置顶等等. 也会遇到在后期运维中,策划要求增加新的功能而造成你 ...

  8. android学习笔记五——AutoCompleteTextView

    AutocompleteTextview ==> 使用比较容易,只需要为其设置一个Adapter,该Adapter封装其需要预设的文本内容. 如下所示实例: <RelativeLayout ...

  9. datagridview 列位置 设置顺序与加载显示顺序不一致

    因为: dgv.AutoGenerateColumns = false;//禁止自动生成列 该属性是在 dgvJdmx.DataSource = dt; 之后设置的原因. 将两者调换,即可.

  10. Android AVD创建及设置中各参数详解

    设置AVD时有些参数比较模糊,特地找了篇文章,大家参考下! 本文根据如下的模拟器安装做一些解释: Name:自定义虚拟的名称,不能有空格或者其他非法字符,否则不能创建,即Creat AVD不能高亮点击 ...