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

  效果图:

ASP.NET MVC 使用Echarts的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  2. C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

    本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...

  3. 应用程序框架实战三十三:表现层及ASP.NET MVC介绍(二)

    最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...

  4. 表现层及ASP.NET MVC介绍(二)

    表现层及ASP.NET MVC介绍(二) 最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和 ...

  5. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  6. ASP.NET MVC实现Excel文件的上传下载

    在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...

  7. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  8. asp.net MVC通用权限管理系统-响应式布局-源码

    一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...

  9. ASP.NET MVC通用权限管理系统(响应布局)源码更新介绍

    一.asp.net mvc 通用权限管理系统(响应布局)源码主要以下特点: AngelRM(Asp.net MVC)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash ...

随机推荐

  1. Spring Timer 两种实现

    有两种流行Spring定时器配置:Java的Timer类和OpenSymphony的Quartz.1.Java Timer定时 首先继承java.util.TimerTask类实现run方法 impo ...

  2. JZ2440开发笔记(1)——arm-linux-gcc环境搭建

    1 下载arm-linux-gcc-4.4.3安装包,http://arm9.net/download.asp 2 解压arm-linux-gcc-4.4.3-20100728.tar.gz,使用命令 ...

  3. Asm Shader Reference --- Shader Model 3.0 part

    ps部分 概览   Instruction Set                                       Name Description Instruction slots S ...

  4. Cogs 97. [NOIP2007] 树网的核 Floyd

    题目: http://cojs.tk/cogs/problem/problem.php?pid=97 97. [NOIP2007] 树网的核 ★☆   输入文件:core.in   输出文件:core ...

  5. 12款有助于简化CSS3开发的工具

    网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将介绍12款有助于简化CSS3开发的工具.  1.CSS3 Pie: 允许在IE上使用CSS3绝大部 ...

  6. HDU 1102 Constructing Roads (最小生成树)

    最小生成树模板(嗯……在kuangbin模板里面抄的……) 最小生成树(prim) /** Prim求MST * 耗费矩阵cost[][],标号从0开始,0~n-1 * 返回最小生成树的权值,返回-1 ...

  7. 安装 Linux 与 Windows 10 双系统,你需要了解的一切

    该选Windows 10还是Linux Mint?鱼与熊掌当然可以兼得,但咱们得掌握点小技巧才能顺利搞定. Windows 10绝不是唯一一款值得我们安装在自己计算机之上的免费操作系统.Linux只靠 ...

  8. 怎么从代码中拿到栈回溯信息(call stack trace)

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:怎么从代码中拿到栈回溯信息(call stack trace).

  9. 传值(VIP)

    页面间传值主要分为:1.属性传值.2.协议传值.3.单例传值.4.Block传值:   界面之间的传值:   1.从前往后:属性传值 2.从后往前:代理传值   3.多界面之间的传值 — 单例传值   ...

  10. Spring AOP切面

    在软件开发中,分布于应用多出的功能被称为和横切关注点. 通常,这些横切关注点从概念上是与应用的业务逻辑相分离的(可是往往直接嵌入到应用的业务逻辑中).将这些横切关注点与业务逻辑相分离正是面向切面编成( ...