C#使用echarts实现文章统计
程序员文章站
2022-06-12 17:18:09
...
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
上一篇： 前端页面积累------form表单
下一篇： 表单