WPF+WebBrowser+Echarts

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 ;
        }

 

显示效果：