1、官方下载echarts 包。

2、实例案例:

 1)页面:

<h2>Index</h2>

<div id="main" style="height:400px"></div>

<br />
<br />

<div id="main2" style="height:600px"></div>


<input type="button" name="name" value="导出" id="export" />

<form id="chartForm" style="display:none" method="post" enctype="multipart/form-data" action="/lang/EchartTest/Export">
    <input id="imageValue" name="base64Info" type="text" maxlength="50000" />
    <input id="imageValue" name="fileType" type="text" value=".png" />
</form>


<script src="~/Scripts/jquery-1.10.2.js"></script>


<script src="~/Resources/echarts-2.2.7/build/dist/echarts-all.js"></script>

<script src="~/Resources/main.js"></script>

<script src="~/Resources/main2.js"></script>

2)main.js

var myChart = echarts.init(document.getElementById(\'main\'));

var option = {
    tooltip: {
        show: true
    },
    legend: {
        data: [\'销量\']
    },
    xAxis: [
        {
            type: \'category\',
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        }
    ],
    yAxis: [
        {
            type: \'value\'
        }
    ],
    series: [
        {
            "name": "销量",
            "type": "bar",
            "data": [5, 20, 40, 10, 10, 20]
        }
    ]
};

// 为echarts对象加载数据 
myChart.setOption(option);

//导出
$(\'#export\').on(\'click\', function () {
    alert(\'111\');
    var chartExportUrl = \'/lang/EchartTest/Export\';
    var picBase64Info = myChart.getDataURL();//获取echarts图的base64编码,为png格式。

    $(\'#chartForm\').find(\'input[name="base64Info"]\').val(picBase64Info);//将编码赋值给输入框                                               
    $(\'#chartForm\').submit();
});

3)main2.js

var option = {
    title: {
        text: \'Spread用户访问来源\n\',
        x: \'center\',
        padding:[0,0,30,0]
    },
    tooltip: {
        trigger: \'item\',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: \'vertical\',
        left: \'left\',
        data: [\'直接访问\', \'邮件营销\', \'联盟广告\', \'视频广告\', \'搜索引擎\'],
        padding: [30, 0, 30, 0]
    },
    series: [
        {
            name: \'访问来源\',
            type: \'pie\',
            radius: \'55%\',
            center: [\'50%\', \'60%\'],
            data: [
                { value: 335, name: \'直接访问\' },
                { value: 310, name: \'邮件营销\' },
                { value: 234, name: \'联盟广告\' },
                { value: 135, name: \'视频广告\' },
                { value: 1548, name: \'搜索引擎\' }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: \'rgba(0, 0, 0, 0.5)\'
                }
            }
        }
    ]
};

var myChart = echarts.init(document.getElementById(\'main2\'));


// 为echarts对象加载数据 
myChart.setOption(option);

4)Action

        [HttpPost]
        public ActionResult Export(string base64Info,string fileType)
        {
            string[] arr = base64Info.Split(new string[] { "base64," }, StringSplitOptions.RemoveEmptyEntries);
            byte[] byteArray = Convert.FromBase64String(arr[1]);

            string path = Server.MapPath("/Resoucrces/File/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filename = DateTime.Now.ToFileTime() + fileType;
            string savePath = path + filename;

            FileStream fs = System.IO.File.Create(savePath);
            fs.Write(byteArray, 0, byteArray.Length);
            fs.Close();

            string pdfPath = path + DateTime.Now.ToFileTime() + ".pdf";

            ConvertHelper.ConvertJPGToPDF(savePath, pdfPath);

            return Content("保存成功");
        }

5)安装 iTextSharp 程序包

用nuget 安装 iTextSharp :

Install-Package iTextSharp

6)ConvertHelper

    public static void ConvertJPGToPDF(string jpgfile, string pdf)
        {
            var document = new Document(iTextSharp.text.PageSize.A4, 25, 25, 25, 25);
            using (var stream = new FileStream(pdf, FileMode.Create, FileAccess.Write, FileShare.None))
            {
                PdfWriter.GetInstance(document, stream);
                document.Open();
                using (var imageStream = new FileStream(jpgfile, FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
                {
                    var image = Image.GetInstance(imageStream);
                    if (image.Height > iTextSharp.text.PageSize.A4.Height - 25)
                    {
                        image.ScaleToFit(iTextSharp.text.PageSize.A4.Width - 25, iTextSharp.text.PageSize.A4.Height - 25);
                    }
                    else if (image.Width > iTextSharp.text.PageSize.A4.Width - 25)
                    {
                        image.ScaleToFit(iTextSharp.text.PageSize.A4.Width - 25, iTextSharp.text.PageSize.A4.Height - 25);
                    }
                    image.Alignment = iTextSharp.text.Image.ALIGN_MIDDLE;
                    document.Add(image);
                }
                document.Close();
            }
        }

7)效果:

图片效果:

 

pdf效果:

 

版权声明:本文为zoro-zero原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zoro-zero/p/6878277.html