Echarts官网
页面配置：
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EchartsPage</title>
<script src="~/Content/js/jquery.min.js"></script>
<script src="~/Content/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:auto;height:400px;margin:2% auto;"> </div>
<script>
$(function () {
start();
});
function start() {
var url = "/Home/GetEchartsConfig";
$.post(url, function (result) {
var myChart = echarts.init(document.getElementById('main'));//此处jquery获取无效 个人尝试
myChart.setOption(JSON.parse(result));
}); }
</script>
</body>
</html>
后台代码：
using Base;
using Lib;
using Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc; namespace WebAdmin.Controllers.Home
{
public partial class HomeController
{
public ActionResult EchartsPage()
{
return View();
}
public JsonResult GetEchartsConfig()
{
var list = GetList();
var yData = new List<string>();
var xReg=new List<int>();
var xAndroid=new List<int>();
var xIos=new List<int>();
var xBJCity=new List<int>();
var xSHCity=new List<int>();
foreach (var item in list)
{
yData.Add(item.CTime.ToString("yyyy/MM/dd"));
} JsonResult json = new JsonResult();
string[] legend = { "注册用户", "Android", "IOS", "北京", "上海" };
yData = yData.Distinct().ToList().Take(8).ToList();
foreach (var item in yData)
{
xReg.Add(UserCount(item, -1, -1));
xAndroid.Add(UserCount(item, 2, -1));
xIos.Add(UserCount(item, 3, -1));
xBJCity.Add(UserCount(item, -1, 1));
xSHCity.Add(UserCount(item, -1, 2));
} JObject option = new JObject()
{
//new JProperty("title", new JObject { new JProperty("text","测试") }),
new JProperty("tooltip", new JObject { new JProperty("show", true) }),
new JProperty("legend", new JObject { new JProperty("data", legend) }),
new JProperty("grid", new JObject { new JProperty("left", "2%") },new JObject { new JProperty("right", "3%") },new JObject { new JProperty("containLabel", true) }),
new JProperty("xAxis", new JObject[] {new JObject { new JProperty("type", "category"), new JProperty("data", yData) } }),
new JProperty("yAxis", new JObject[] { new JObject { new JProperty("type", "value") } }),
new JProperty("series",new JObject []{new JObject { new JProperty("name", "注册用户"), new JProperty("type", "line"), new JProperty("data", xReg) } },new JObject []{new JObject { new JProperty("name", "Android"), new JProperty("type", "line"), new JProperty("data", xAndroid) } },new JObject []{new JObject { new JProperty("name", "IOS"), new JProperty("type", "line"), new JProperty("data", xIos) } },new JObject []{new JObject { new JProperty("name", "北京"), new JProperty("type", "line"), new JProperty("data", xBJCity) } },new JObject []{new JObject { new JProperty("name", "上海"), new JProperty("type", "line"), new JProperty("data", xSHCity) }}),
};
json.Data = JsonConvert.SerializeObject(option); return json; }
/// <summary>
/// 用户所有数据
/// </summary>
/// <returns>List</returns>
public List<V_Biz_Agent> GetList()
{
using (var db = DBHelper.GetDB())
{
var sql = " select * from Biz_Agent where InfoState=1";
var list = db.Query<V_Biz_Agent>(sql).ToList();
return list.Count > 0 ? list : new List<V_Biz_Agent>();
}
}
/// <summary>
///
/// </summary>
/// <param name="dateTimeStr"></param>
/// <param name="platform"></param>
/// <param name="city"></param>
/// <returns></returns>
public int UserCount(string dateTimeStr, int platform, int city)
{
try
{
var dateTime = Convert.ToDateTime(dateTimeStr);
if (platform > 0 && city > 0)
{
return GetList().Count(m => m.CTime.Year == dateTime.Year && m.CTime.Month == dateTime.Month && m.CTime.Day == dateTime.Day && m.Platform == platform && m.GetUserInfo.BizCity == city);
}
else if (platform > 0 && city > 0)
{
return GetList().Count(m => m.CTime.Year == dateTime.Year && m.CTime.Month == dateTime.Month && m.CTime.Day == dateTime.Day && m.Platform == platform);
}
else if (platform < 0 && city > 0)
{
return GetList().Count(m => m.CTime.Year == dateTime.Year && m.CTime.Month == dateTime.Month && m.CTime.Day == dateTime.Day && m.GetUserInfo.BizCity == city);
}
else
{
return GetList().Count(m => m.CTime.Year == dateTime.Year && m.CTime.Month == dateTime.Month && m.CTime.Day == dateTime.Day);
} }
catch (Exception ex)
{
LOGHelper.Trace(LOGHelper.ST.Day, "【HomeController】", ex.Message);
return 0;
} }
}
}
效果图：
