Echarts图表学习
最近项目已经运行的比较稳定了，正巧看到ECcharts的图标很炫，遂做一个玩玩，以备后面做数据分析使用。
官网地址：http://echarts.baidu.com/index.html
大致了解了下Echarts的各个实例，发现使用起来还是简单易上手的。
利用数据库里面的出入库数据做一个年度的出入库折线图。（这里的Echarts-darkTheme.js是用了官网的一个dark主题皮肤）
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="~/Themes/P2Mobile/js/echarts.js"></script>
<script src="~/Themes/P2Mobile/js/Echarts-darkTheme.js"></script>
<script src="~/Themes/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "/FRUInventoryBarCodeMobile/AnalysisInboundData_GetSoruceData",
type: "POST",
data: { },
datatype: "json",
success: function (data) {
if (data.msgType == "success") {
var dom = document.getElementById("container");
var myChart = echarts.init(dom, 'dark');
var app = {};
option = null;
option = {
title: {
text: '本年度进出库存分析'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['收货数量', '出货数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.Months,
name: "月份"
},
yAxis: {
type: 'value',
name: "EA数"
},
series: [
{
name: '收货数量',
type: 'line',
stack: '总量',
data: data.ReceiveData
},
{
name: '出货数量',
type: 'line',
stack: '总量',
data: data.OutboundData
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
window.onresize = myChart.resize;
}
}
else if (data.msgType == "error") {
layer.open({
content: data.msg
, skin: 'msg'
, time: //2秒后自动关闭
});
}
}
}) }) </script>
</body>
</html>
后端取数据
#region 出入库大数据分析
public ActionResult AnalysisInboundData()
{
return View();
}
public ActionResult AnalysisInboundData_GetSoruceData()
{
LogHelper lh = new LogHelper();
if (user != null)
{
DBConn = user.DBConn.ToString();
}
else
{
return RedirectToAction("Login", "P2Mobile");
}
JsonMsg jsmsg = new JsonMsg();
List<string> Months = new List<string>();
List<string> ReceiveData = new List<string>();
List<string> OutboundData = new List<string>();
DataSet ds_ReceiveOut= p2mobile_inventorybarcodeibll.ExecSql(@"SELECT MONTH(wip.CreateDate) 月份 ,
CAST(SUM(wip.ReceiveEAQty) AS DECIMAL(18,0)) 收货数量
FROM dbo.WMS_InboundReceivePart wip
WHERE DATEDIFF(month, wip.CreateDate,
DATEADD(month, -DATEPART(month, GETDATE()) + 1, GETDATE())) < 1
GROUP BY MONTH(wip.CreateDate)
ORDER BY MONTH(wip.CreateDate);
SELECT MONTH(wo.ShipmentTime) 月份 ,
CAST(SUM(wo.OrderEAQty) AS DECIMAL(18,0)) 发货数量
FROM dbo.WMS_Outbound wo
WHERE DATEDIFF(month, wo.ShipmentTime,
DATEADD(month, -DATEPART(month, GETDATE()) + 1, GETDATE())) < 1
AND ISNULL(wo.ShipmentTime,'')<>''
GROUP BY MONTH(wo.ShipmentTime)
ORDER BY MONTH(wo.ShipmentTime);", DBConn);
for (int i = ; i < ds_ReceiveOut.Tables[].Rows.Count; i++)
{
Months.Add(ds_ReceiveOut.Tables[].Rows[i]["月份"].ToString());
ReceiveData.Add(ds_ReceiveOut.Tables[].Rows[i]["收货数量"].ToString());
}
for (int j = ; j < ds_ReceiveOut.Tables[].Rows.Count; j++)
{
OutboundData.Add(ds_ReceiveOut.Tables[].Rows[j]["发货数量"].ToString());
}
return Json(new { msgType = JsonMsgType.Success, Months = Months, ReceiveData = ReceiveData, OutboundData = OutboundData }, JsonRequestBehavior.AllowGet);
}
#endregion
Echarts图表学习的更多相关文章
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- vue中添加Echarts图表的使用，Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签（axisLabel）折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
随机推荐
- HDU 5974 A Simple Math Problem (解方程)
题意:给定a和b,求一组满足x+y=a && lcm(x, y)=b. 析:x+y = a, lcm(x, y) = b,=>x + y = a, x * y = b * k,其 ...
- C语言函数调用的底层机制
由这个文章引入吧(百度文库:http://wenku.baidu.com/link?url=aAm1tBg4okqIyFAmfgrJBHdPDrri5LUEKrJjn-dNITds5lwSm550DT ...
- 以后尽量不用cin、cout啦
cout输出有问题(对于double,不同OJ处理的结果不一样),cin读入机制较scanf繁琐.慢!!!!!!!!
- Django 之 JsonResponse 对象
JsonResponse 是 HttpResponse 的子类,与父类的区别在于: JsonResponse 默认 Content-Type 类型为 application/json HttpResp ...
- 怎么触发gridview 的SelectedIndexChanged事件?
<asp:GridView onclick="javascript:SelectedIndexChanged()" ID="GridView1" runa ...
- 清北刷题冲刺 11-01 a.m
立方体 /* 输入数据中的p的位置是没有用的,而题目本质上是求C(n,k) */ #include<iostream> #include<cstdio> #define mod ...
- 在Linux系统下远程连接oracle的防火墙设置
在Linux系统要远程连接Oracle的防火墙设置方法: 打开5801至5810 端口用于vnc iptables -I INPUT -p tcp --dport 5801:5810 -j ACCEP ...
- 在 CentOS7 安装 ELK【转】
ELK是一个成熟的日志系统,主要功能有收集.分析.检索,详细见 elastic官网. 本文主要介绍如何在CentOS7下安装最新版本的ELK,当然现在docker已经有完全配置成功的elk容器,安装配 ...
- print和sys.stdout
print print语句执行的操作是一个写操作,把我们从外设输入的数据写到了stdout流,并进行了一些特定的格式化.和文件方法不同,在执行打印操作是,不需要将对象转换为字符串(print已经帮我们 ...
- （1009) HDU 6446 Tree and Permutation(规律+树上各个点的距离和）
题意: 给一棵N个点的树,对应于一个长为N的全排列,对于排列的每个相邻数字a和b,他们的贡献是对应树上顶点a和b的路径长,求所有排列的贡献和. 分析: 经过简单的分析可以得知,全部的贡献其实相当与(这 ...