• echart 图表 在.net中生成图片的方法


    经过中午近两个小时的努力,终于可以实现了: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;
            }

  • 相关阅读:
    查找算法:二分查找法(折半查找)
    钞票找零-贪心,动态规划算法
    PHP7与php5
    网站高并发解决方案(理论知识) 二
    loj#6566. 月之都的密码
    我的 Linux 配置
    CTSC2011 幸福路径
    WC2018 即时战略
    uoj#460 新年的拯救计划
    bzoj 5016 一个简单的询问
  • 原文地址:https://www.cnblogs.com/wdkshy/p/4206018.html
Copyright © 2020-2023  润新知