经过中午近两个小时的努力，终于可以实现了：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. 淘宝天猫关键词SEO优化

    淘宝天猫的网站完全像是一个成熟的搜索引擎,只是从google.bing.baidu改成了淘宝天猫而已,普通搜索引擎有品专,有皇冠,有PC,有无线:淘宝天猫里面有钻展,有直通车,也有PC,无线.搜索引擎 ...

  2. Python文件处理之文件写入方式与写缓存（三）

    Python的open的写入方式有: write(str):将str写入文件 writelines(sequence of strings):写多行到文件,参数为可迭代对象 首先来看下writelin ...

  3. 编写使用SpringSecurity的JUnit测试提醒

    近日在使用SpringSecurity的项目中发现一个小问题,就是在接口上加了@Secured标注限制调用接口权限时,某些JUnit无法正常调用了. 例如: @Secured(PrivilegeDAO ...

  4. 【转】调试Release发布版程序的Crash错误

    http://www.cppblog.com/Walker/archive/2012/11/08/146153.html http://blog.sina.com.cn/s/blog_48f93b53 ...

  5. AppCan做的图片上传代码

    存在AppCan里的网页 index.html <!DOCTYPE html> <html class="um landscape min-width-240px min- ...

  6. Python函数,参数,变量

    func1.py def sayHello(): print ('hello world') sayHello() func_parm.py def printMax(a,b): if a>b: ...

  7. angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

    使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...

  8. 【转】c# winform DataGridView导出数据到Excel中，可以导出当前页和全部数据

    准备工作就是可以分页的DataGridView,和两个按钮,一个用来导出当前页数据到Excel,一个用来导出全部数据到Excel 没有使用SaveFileDialog,但却可以弹出保存对话框来 先做导 ...

  9. flash bulider 无法启动

    更新airsdk后无法启动,google下http://www.25kx.com/art/1826181有n种方法,怀疑是.metadata目录原因,可能是旧版的airsdk和新版的airsdk在.m ...

  10. Learning Core Data 1

    What is Core Data? If you want to build anything beyond the most simplistic apps for iOS, you’ll nee ...