前端显示:
HTML:
<div id="AdminECharts1" style="width: 96%;height:400px;margin:auto">
</div>
js包的引用:
技术获取链接:
链接:提取地址
提取码:mpxk
<script src="~/TemplateFile/ECharts/echarts.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
js代码区域:
<script type="text/javascript">
function loadTwoLine() {
var myChart = echarts.init(document.getElementById('AdminECharts1'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '博文数量变化'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['博文']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false, //取消左侧的间距
data: []
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
name: '博文',
type: 'line',
symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var series1 = [];
$.ajax({
url: "/Administrators/AdminIDateEc",
type: "post",
success: function (result) {
console.log(result);
//请求成功时执行该函数内容,result即为服务器返回的json对象
$.each(result, function (index, item) {
names.push(item.DateTimeBlog); //挨个取出类别并填入类别数组
series1.push(item.BlogNum);
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
data: series1
}]
});
}
,
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
};
loadTwoLine();
</script>
声明类别:
控制器端方法:
//ECharts数据源1
public JsonResult AdminIDateEc()
{
//声明博客集合
List<BlogDates> blogdate = new List<BlogDates>();
//添加
var stateid1 = db.BlogState.FirstOrDefault(p => p.BlogSateName == "审核").BlogSateID;
var stateid2 = db.BlogState.FirstOrDefault(p => p.BlogSateName == "通过").BlogSateID;
//循环加入数据
for (int i = 0; i < 7; i++)
{
BlogDates dates = new BlogDates();
var time = DateTime.Parse(DateTime.Now.AddDays(-i).ToString("yyyy-MM-dd"));
var nums = db.Blog.Where(p => p.ReleseaTime <=time&&p.BlogSateID == stateid1 || p.BlogSateID == stateid2).Count();
dates.DateTimeBlog = time.ToString("yyyy-MM-dd");
dates.BlogNum = nums;
//添加进博客集合
blogdate.Add(dates);
}
//转换为JSON数据
return Json(blogdate, JsonRequestBehavior.AllowGet);
}
效果图: