WPF+WebBrowser+Echarts

本文档展示了如何使用ECharts库创建一个显示营业趋势的HTML页面。首先从GitHub下载ECharts文件,然后在HTML中引入JS包并设置图表配置。接着在后台获取数据并转化为JSON格式,通过WebBrowser控件的InvokeScript方法传递给前端JS函数进行数据显示。示例代码详细解释了日期处理、数据转换和图表渲染的过程。
摘要由CSDN通过智能技术生成

Echarts 文件包下载:https://github.com/apache/incubator-echarts/tree/4.9.0

创建一个html页面引入Echarts的js包

html页面属性改为始终复制,不然的话bin目录下的html不会更新,创建html页面之后最好去bin目录看看没有html页面,没有就直接复制过去

 

js代码:

 var arr = [];//用来存放最近七天的时间

        function getBeforeDate(n) {
            var n = n;
            var d = new Date();
            var year = d.getFullYear();
            var mon = d.getMonth() + 1;
            var day = d.getDate();
            if (day <= n) {
                if (mon > 1) {
                    mon = mon - 1;
                } else {
                    year = year - 1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate() + n); //很重要,+n取得是前一天的时间
            year = d.getFullYear();
            mon = d.getMonth() + 1;
            day = d.getDate();
            s = (mon < 10 ? ('0' + mon) : mon) + "月" + (day < 10 ? ('0' + day) : day) + "日";
            return s;
        }

        for (var i = 0; i > -7; i--) {
            arr.push(getBeforeDate(i));
        }
        window.console = window.console || (function () {
            var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
                = c.clear = c.exception = c.trace = c.assert = function () { };
            return c;
        })();

  

 var myChart = echarts.init(document.getElementById('main'));
        function jsShowAmount(msg) {
            //msg后台传的值  我传的是字符串格式的json所以要转成json对象
            var date = JSON.parse(msg);
            option = {
                title: {
                    text: '营业趋势'
                },
                tooltip: {
                    trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                    formatter: '{b}</br> 营业额: {c}元',
                    backgroundColor: 'rgba(255,255,255,0.8)',
                    borderWidth: '1',
                    borderColor: '#FFA000',//提示框颜色
                    textStyle: {
                        color: '#black',//提示框字体颜色
                    }
                },

                xAxis: {
                    type: 'category',//类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
                    boundaryGap: false,
                    data: arr.reverse(),
                    nameGap: 7,//坐标轴名称与轴线之间的距离。
                    axisTick: {//是否显示坐标轴刻度。
                        inside: true//坐标轴刻度是否朝内,默认朝外。
                    }
                },
                yAxis: {
                    type: 'value',
                    nameGap: 15,
                    axisTick: {
                        inside: true
                    }
                },
                series: [{
                    type: 'line',//线条
                    data: date.series,
                    symbol: 'circle',//标记的类型:圆圈
                    itemStyle: {
                        normal: {
                            shadowBlur: 50,//文字块的背景阴影长度。
                            shadowColor: 'red',//文字块的背景阴影颜色。
                            color: 'red',//图形的颜色
                            lineStyle: {
                                color: '#FFA000',//线的颜色
                                width: 1//线的宽度
                            }
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

在xaml中添加WebBrowser

后台代码

在该页面的构造方法中调用Navigate方法 注意:如果bin目录下没有html文件会报路径错误

 wbAmount.Navigate(new Uri(Directory.GetCurrentDirectory() + "/HTML/Chart.html"));

 private void wb_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
        {
            mshtml.HTMLDocument dom = (mshtml.HTMLDocument)wbAmount.Document; //定义HTML
            dom.documentElement.style.overflow = "hidden";    //隐藏浏览器的滚动条 
            dom.body.setAttribute("scroll", "no");            //禁用浏览器的滚动条  


             
            KBS.Entity.KbsApiResult<List<DetailData>> detailData = kbsService.Detail(DateTime.Now.AddDays(-7), DateTime.Now, MT_Name.ALL, CCR_PayType.ALL);//这是我需要的数据

            float[] Amount = getAmount(detailData);

            var newObj = new
            {
                series = Amount
            };
            string strJson = JsonConvert.SerializeObject(newObj, Formatting.None);
            wbAmount.InvokeScript("jsShowAmount", strJson);
        }


private float[] getAmount(KbsApiResult<List<DetailData>> list)
        { 

            //当前时间减去的订单时间的时间差作为数组下标,再计算当天的金额
            float[] arr = new float[7]; 
            foreach (var item in list.data)//循环一个星期
            {
                DateTime dateTime = GetDateTime(long.Parse(item.creatTime));//订单时间
                string time = DateTime.Now.ToString("yyyy/MM/dd") + " 23:59:59";//当前时间的最后一毫秒 2020/10/22 23:59:59
                DateTime date = Convert.ToDateTime(time);/
                TimeSpan timeSpan = date.Subtract(dateTime);//计算出时间差 
                arr[timeSpan.Days] += float.Parse(item.corAmount);//timeSpan.Days下标和此次金额
            } 
            return arr ;
        }

 

显示效果:

### 回答1: WPF是一种基于XAML语言的用户界面开发框架,使开发人员能够轻松创建漂亮和高效的桌面应用程序。MVVM是一种模式,它在WPF应用程序广泛使用,它提供了一种分离UI和业务逻辑的方式,从而简化了代码结构。Prism是一个开源框架,它基于MVVM模式和WPF框架,提供了一些技术和工具,使开发人员能够更轻松地构建复杂的WPF应用程序。 使用WPF MVVM Prism框架可以帮助开发人员提高应用程序的可维护性和可扩展性。通过MVVM,开发人员可以创建一个适应各种应用程序场景的模型,并将其与UI分离。数据绑定和命令绑定使开发人员能够更轻松地将模型的数据和逻辑与UI控件集成起来。Prism框架还提供了一些工具和功能,如模块化应用程序开发、事件聚合器、导航、对话框、异常处理等功能。这些工具使开发人员能够更轻松地构建复杂的应用程序,并提供了一种可扩展和可重用的方法。 总之,使用WPF MVVM Prism可以使开发人员更轻松地构建复杂的应用程序,并提高应用程序的可维护性和可扩展性。开发人员可以根据自己的需求选择使用这个框架来开发WPF应用程序,从而提高他们的工作效率和代码质量。 ### 回答2: WPF MVVM Prism是一种基于Windows Presentation Foundation(WPF)的软件开发模式,采用了MVVM(Model-View-ViewModel)设计模式和Prism框架来实现软件开发。MVVM是一种在WPF应用程序使用的设计模式,它将应用程序的视图(View)与应用程序的模型(Model)分离开来,通过ViewModel来连接二者。Prism是一个帮助开发人员编写出复杂、可管控、可扩展和可维护的WPF应用程序的框架。 WPF MVVM Prism提供了很多好处:首先,它能实现软件的可重用性,通过将代码和视图分离,使得代码可以在多个不同的视图重复使用,提高了开发效率。其次,它可以提高软件的可维护性,通过将逻辑和视图分离,确保逻辑代码与UI代码之间更少的耦合,提高了软件的可扩展性。此外,它还可以提高软件的可测试性,由于MVVM模式将视图和逻辑分离开,所以开发人员可以更容易地编写出单元测试代码,来测试逻辑代码。最后,由于Prism框架提供了一些通用的,可定制的模块和服务,使得开发人员可以更快地实现常见功能、缩短开发时间。 总之,WPF MVVM Prism是一种高效、可扩展和易于维护的软件开发模式,它将视图和逻辑分离,提高了软件的可重用性和可测试性,同时也提高了软件的可扩展性和可复用性。 ### 回答3: WPF是一种桌面应用程序框架,它允许您为Windows创建高度交互式和可视化的应用程序界面。MVVM是一种软件编程模式,它将用户界面(UI)与业务逻辑分离,以便更好地实现可维护,可扩展和可组合的代码。Prism是一个WPF和Silverlight应用程序的组件库,它提供了一些可重用和可扩展的基础设施组件,帮助您更快速地构建、测试和维护WPF应用程序。因此,WPF MVVM Prism的组合可以帮助您更轻松高效地开发WPF应用程序。您可以使用MVVM模式来改进应用程序的结构和测试,使用Prism来更好地组织和可扩展您的代码,以及使用WPF来实现交互丰富的UI。同时还可以使用Prism提供的事件聚合器、导航器和模块化架构,实现更灵活的应用程序设计。WPF MVVM Prism的组合提供了一种更有效的方式来构建WPF应用程序,以满足现代用户体验的需求,并且更容易测试和维护,因此它已成为WPF应用程序开发的重要组合。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值