经过中午近两个小时的努力，终于可以实现了：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. 传递给函数的隐含参数：arguments及递归函数的实现

    传递给函数的隐含参数:arguments当进行函数调用时,除了指定的参数外,还创建一个隐含的对象——arguments.arguments是一个类似数组但不是数组的对象,说它类似是因为它具有数组一样的 ...

  2. 006 [翻译] Haneke（一个Swfit iOS缓存类）

    Github项目地址:https://github.com/Haneke/HanekeSwift Haneke是一个用swift写成的轻量级iOS类,以简单好用著称(design-decisions- ...

  3. 非ROOT用户启动Tomcat

    [root@Z ~]# adduser tomcat [root@Z ~]# chown -R tomcat:tomcat /usr/local/tomcat/ [root@Z ~]# chown - ...

  4. Character 比较注意先要转换成字符串类型

    Character tmp = '/'; if("/".equals(tmp)){ System.out.print("error"); } if(" ...

  5. javascript util.js

    //根据Id获得页面元素 function $(para) {    return document.getElementById(para);} //创建一个新的元素function createE ...

  6. 用javacsv API 来操作csv文件

    javacsv是国外开发的一个比较好的操作csv文件的API,这里简单讲一下用法. 先下载javacsv2.0.zip的文件,解压后,把javacsv.jar 添加到项目中.  本站下载地址: htt ...

  7. json 解析

    纠结了两天的json数组反序列化,终于在同事的帮助下,找到方法了,特作笔记如下: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Sy ...

  8. LintCode "k Sum" !!

    Great great DP learning experience:http://www.cnblogs.com/yuzhangcmu/p/4279676.html Remember 2 steps ...

  9. bootstrap中datetimepicker只选择月份显示1899问题

    直接修改bootstrap-datetimepicker.js中 update: function () { var date, fromArgs = false; if (arguments &am ...

  10. 75. Sort Colors

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...