zoukankan      html  css  js  c++  java
  • .net core 利用Selenium和PhantomJS后台生成EChart图片

    1.引用

    NuGet安装:

    Selenium.Support

    Selenium.WebDriver

    Selenium.WebDriver.PhantomJS.CrossPlatform  (分布Linux时把对应PhantomJS复制到发布目录)

    2.后台打开的页面

    @{
        Layout = "/Views/Shared/Ordinary.cshtml";
        ViewData["Title"] = "图表模版";
    }
    @section css{
        <link href="@ViewBag.url/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    }
    <div id="chartmain" class="col-lg-12 col-sm-12" style="height:400px;600px;"></div>
    <script src="@ViewBag.url/lib/jquery/dist/jquery.js"></script>
    <script src="@ViewBag.url/js/echarts.min.js"></script>
    <script type="text/javascript">
    
            var time = [];
            var nameArr = [
            ];
            //指定图标的配置和数据
            var option = {
                title: {
                    text: 'chart'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {//平铺、折叠、生成png图片
                    show: true,
                    feature: {
    
                        dataView: { readOnly: false },
                        magicType: { show: true, type: ['stack', 'tiled', 'line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: true,//是否显示网格线
                    },
                    name: "time"
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    name: "value",
                    splitLine: {
                        show: true,//是否显示网格线
                    }
                },
                series: [{
                    name: 'value',
                    type: 'line',
                    data: nameArr
                }]
            };
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('chartmain'));
            //使用制定的配置项和数据显示图表
            myChart.setOption(option);
    
    
        function getTime(date) {
            var Hours = date.getHours();//获取当前小时数(0-23)
            var Minutes = date.getMinutes(); //获取当前分钟数(0-59)
            var Seconds = date.getSeconds();//获取当前秒数(0-59)
            var Milliseconds = date.getMilliseconds();//获取当前毫秒数(0-999)
            return Hours + ":" + Minutes + ":" + Seconds
        }
    </script>
    View Code

    3.生成图片代码

     PhantomJSDriverService pds = PhantomJSDriverService.CreateDefaultService(AppDomain.CurrentDomain.BaseDirectory.ToString());
                        var driver = new PhantomJSDriver(pds);
    
                        var request = injection.GetHttpContext.HttpContext.Request;
                        StringBuilder url = new StringBuilder();
                        url.Append(request.Scheme);
                        url.Append("://");
                        url.Append(request.Host);
                        url.Append("/Business/Report/TemplateEChart");
                        driver.Navigate().GoToUrl(url.ToString());//打开链接
    View Code
    //执行js
                        ((IJavaScriptExecutor)driver).ExecuteScript("myChart.setOption(" + JsonHelper.ObjectToJson(ff) + ");");
                        //截图保存
                        Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot();
                        string mapPath = @hostingEnvironment.WebRootPath;
                        string imgPatht = "/report/tempImg";
                        string dirt = mapPath + imgPatht;
                        if (!Directory.Exists(dirt))
                        {
                            DirectoryInfo dirInfo = Directory.CreateDirectory(dirt);
                        }
                        string imgSrct = imgPatht + "/" + Guid.NewGuid().ToString() + ".png";
                        string fullPatht = mapPath + imgSrct;
                        screenshot.SaveAsFile(fullPatht, ScreenshotImageFormat.Png);
                        //退出
                        driver.Quit();
    View Code

    错误:Permission denied

    解决方法:PhantomJS文件设置最高权限

    错误:System.TypeInitializationException: The type initializer for 'Gdip' threw an exception. ---> System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found.

    解决方法:Linux安装    yum install libgdiplus

  • 相关阅读:
    OleDbCommand 的用法
    递归求阶乘
    C#重写窗体的方法
    HDU 5229 ZCC loves strings 博弈
    HDU 5228 ZCC loves straight flush 暴力
    POJ 1330 Nearest Common Ancestors LCA
    HDU 5234 Happy birthday 01背包
    HDU 5233 Gunner II 离散化
    fast-IO
    HDU 5265 pog loves szh II 二分
  • 原文地址:https://www.cnblogs.com/asd14828/p/10572743.html
Copyright © 2011-2022 走看看