C#使用echarts实现文章统计

echarts官网:https://echarts.apache.org/examples/zh/index.html

在C#中实现统计功能:

本人使用Api来实现的统计其中使用了Linq:

创建一个ApiController.cs,下面是代码,(其中的查询代码是OrchardCore的代码):

///开始  发布文章的人员统计
        [HttpGet]
        [Route("CreateArticleTemplate")]
        public ActionResult CreateArticleTemplate()
        {
            return View("UserCreateArticleIndex");
        }
        [HttpGet]
        [Route("ArticleCreatedWithinAWeek")]
        public async Task<ActionResult> ArticleCreatedWithinAWeek()//一周内用户创建的Article
        {
            var CurrentTime = DateTime.Now;
            var CreateArticleTime = DateTime.Now.AddDays(Convert.ToDouble((0 - Convert.ToInt16(DateTime.Now.DayOfWeek))) - 7).ToShortDateString();

            DateTime dtWeekDay = Convert.ToDateTime(DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd"));//一周
           // DateTime dtWeekDay = new DateTime(2017 - 12 - 06);
            var UserCreateArticleList = await _session.Query<UserCreateArticle, UserCreateArticleIndex>().ListAsync();
            var query = (from num in
                   (
                   from user in UserCreateArticleList
                   where user.CreateTime > dtWeekDay
                   group user by user.ArticleAuthor into g
                   select new
                   {
                       user = g.Key,
                       cnt = g.Count()
                   }
                   
               )
                         orderby num.cnt descending
                         select new { num.user, num.cnt }).ToList();

            HotUserCreateArticleLinq hotUserCreateArticleLinq = new HotUserCreateArticleLinq();

            for (int i = 0;i != query.Count; i++)
            {

                var ArticleContenItem =
                    await _session.Query<UserCreateArticle, UserCreateArticleIndex>()
                        .Where(m => m.ArticleAuthor == query[i].user).FirstOrDefaultAsync();

                hotUserCreateArticleLinq.NameList.Add(ArticleContenItem.ArticleAuthor == "" ? "无作者" : ArticleContenItem.ArticleAuthor);
                hotUserCreateArticleLinq.ValueList.Add(query[i].cnt);
            }
            var JsonString = ModelToJson<HotUserCreateArticleLinq>("data", hotUserCreateArticleLinq);
            return Ok(JsonString);
        }//----GT

创建一个Model:

using System;
using System.Collections.Generic;
using System.Text;

namespace Onon.Gov.Models
{
    public class HotUserCreateArticleLinq
    {
        public List<int> ValueList { get; set; } = new List<int>();
        public List<string> NameList { get; set; } = new List<string>();

    }
}//----GT

 

 下面是转换JSon代码:

 public static string ModelToJson<T>(string jsonName, HotUserCreateArticleLinq IL)
        {
            StringBuilder NameJson = new StringBuilder();

            NameJson.Append("{\"" + jsonName + "\":{");
            if (IL.NameList.Count > 0)
            {
                NameJson.Append("\"NameList\":[");
                for (int i = 0; i < IL.NameList.Count; i++)
                {
                    NameJson.Append("\"" + IL.NameList[i] + "\"");
                    if (i < IL.NameList.Count - 1)
                    {
                        NameJson.Append(",");
                    }
                }
                
                NameJson.Append("],");
            }
            if (IL.ValueList.Count > 0)
            {
                NameJson.Append("\"ValueList\":[");
                for (int i = 0; i < IL.ValueList.Count; i++)
                {
                    NameJson.Append(IL.ValueList[i]);
                    if (i < IL.ValueList.Count - 1)
                    {
                        NameJson.Append(",");
                    }
                }
            }
            NameJson.Append("]}}");
            return NameJson.ToString();
        }//----GT

创建一个Views文件夹——>里面再创建一个Api文件夹——>里面再创建cshtml文件:

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>

</head>
<body>
    <div id="main" style="height:400px;width:50%"></div>
    <h1 style="text-align:center;margin:20px 0">一周之内发布的文章统计</h1>
    <div id="main1" style="height:400px;width:50%"></div>
    <h1 style="text-align:center;margin:20px 0">一个月之内发布的文章统计</h1>
    <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "ArticleCreatedWithinAWeek",//发送到本页面后台AjaxMethod方法
                type: "Get",
                async: true,//async翻译为异步的,false表示同步,会等待执行完成,true为异步

                success: function (data) {

                    var articleJson = JSON.parse(data).data;
                    // 基于准备好的dom,初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    option = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: articleJson.NameList,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '已发布',
                                type: 'bar',
                                barWidth: '60%',
                                data: articleJson.ValueList
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error: function () {
                    alert("500!");
                }
            });
            //一个月之内发布的文章统计
        });

    </script>
</body>
</html> ---GT

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 C#echarts 绘制图表需要从数据库中获取数据,然后将数据转换成 echarts 所需的格式。以下是使用 C#echarts 绘制图表的基本步骤: 1. 连接数据库:使用 C# 的 ADO.NET 连接数据库,获取数据库中的数据。 2. 处理数据:将从数据库中获取的数据进行处理,转换成 echarts 所需的格式。比如将数据转换成 JSON 格式。 3. 引入 echarts 库:在 HTML 页面中引入 echarts 库,以便能够使用 echarts 绘制图表。 4. 绘制图表:使用 echarts 的 API 绘制图表,将数据传入 echarts 中。 下面是一个简单的例子,演示如何使用 C#echarts 绘制柱状图: ```csharp using System.Data.SqlClient; using Newtonsoft.Json; public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"); SqlCommand cmd = new SqlCommand("SELECT * FROM Table1", con); con.Open(); SqlDataReader reader = cmd.ExecuteReader(); string data = "["; while (reader.Read()) { data += "['" + reader["Name"].ToString() + "'," + reader["Value"].ToString() + "],"; } data = data.TrimEnd(',') + "]"; con.Close(); string option = @" { title: { text: '柱状图' }, tooltip: {}, xAxis: { type: 'category', data: ['名称'] }, yAxis: { type: 'value' }, series: [{ name: '数值', type: 'bar', data: " + data + @" }] }"; Page.ClientScript.RegisterStartupScript(this.GetType(), "chart", "var chart = echarts.init(document.getElementById('chart')); chart.setOption(" + option + ");", true); } } ``` 在上面的例子中,我们使用 ADO.NET 连接数据库,获取了 Table1 中的数据。然后将数据转换成 echarts 所需的格式,使用 echarts 的 API 绘制柱状图。最后将绘制好的图表通过 JavaScript 注入到 HTML 页面中。 注意:本例子使用了 Newtonsoft.Json 库来将数据转换成 JSON 格式。如果您没有安装这个库,请先安装它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值