经过中午近两个小时的努力，终于可以实现了：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. Redis持久化机制和恢复机制

    Redis持久化方式有两种: (1)RDB 对内存中数据库状态进行快照 (2)AOF 把每条写命令都写入文件,类似mysql的binlog日志 RDB 将Redis在内存中的数据库状态保存到磁盘里面, ...

  2. C#遍历hashtable

    foreach (DictionaryEntry de in hashTable) { System.Windows.Forms.MessageBox.Show(de.Key.ToString()); ...

  3. Innodb 表修复（转)

    摘要:      突然收到MySQL报警,从库的数据库挂了,一直在不停的重启,打开错误日志,发现有张表坏了.innodb表损坏不能通过repair table 等修复myisam的命令操作.现在记录下 ...

  4. Neutron LBaaS Service（1）—— Neutron LBaaS Service基本知识

    在OpenStack Grizzly版本中,Quantum组件引入了一个新的网络服务:LoadBalancer(LBaaS),服务的架构遵从Service Insertion框架.LoadBalanc ...

  5. HackerRank "Dorsey Thief"

    A variation to 0-1 Knapsack. (No Python code got fully AC. Python is too slow for this problem) #inc ...

  6. bzoj4229: 选择

    Description 现在,我想知道自己是否还有选择. 给定n个点m条边的无向图以及顺序发生的q个事件. 每个事件都属于下面两种之一: 1.删除某一条图上仍存在的边 2.询问是否存在两条边不相交的路 ...

  7. FastReport使用一——简介

    一:FastReport Designer用法简介 1.使用FastReport.Net4文件夹下的Designer.exe进行模版的创建工作 图1 图1中,右键删除除==>数据区 之外的其他区 ...

  8. 黄聪：C#如何操作JSON数据（读取、分析）

    使用开源的类库Newtonsoft.Json(下载地址http://json.codeplex.com/).下载后加入工程就能用.通常可以使用JObject, JsonReader, JsonWrit ...

  9. c# 存档修改 读取 写入

    内涵图

  10. H5与Native交互的实现

    PDF文件下载:将后缀png改成PDF.