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中如何 ...
随机推荐
- IOS 获取系统通讯录
进入正题 获取系统通讯录,不想多讲,留下链接http://my.oschina.net/joanfen/blog/140146 通常做法: 首先创建一个ABAddressBookRef类的对象add ...
- 关于goneaway及499
关于上面现象的分析如下 问题描述: 接口偶发性出现接口耗时过长的情况 根源: “sockets的快速回收”机制被启动 简单代码+数据分析: 1. 经简单分析,耗时主要出现在连接数据库的方法: ...
- C# 外观模式
外观模式(Facade Pattern) 介绍 定义: 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.使用外观模式时,创建了一个统一的类,用来 ...
- 项目：IT资源共享资源（登录后端）<2>
公众号技术标签 小程序 PHP 源码 项目 ThinkPHP5.0目录结构,新建一个模块api,该模块下面有controller.model 目录,前者放控制器,写API接口(这里是简单的api写法) ...
- PTA 1045【DP】
思路: DP[ i ] 代表以值 i 结尾的当前最长长度. 每次枚举序列数组,dp[ i ] = max( dp[ i ] ,dp[ a[j] ] + 1); #include <bits/st ...
- （PHP）redis String（字符串）操作
/** * * String操作 * 字符串操作 * */ //设置键值:成功返回true,否则返回false,键值不存在则新建,否则覆盖 $redis->set('string', 'hell ...
- 帝都Day3——各种dp
备注:Day1 Day2记得笔记太233,所以就不发了 备注2:Day4~Day7发不发看心情qaq (7.17持续更新中...) 动态规划A 记忆化搜索 & 动态规划初步 8点15: 杨姓d ...
- 配置文件中取值： spring配置文件中util:properties和context:property-placeholder
转载大神 https://blog.csdn.net/n447194252/article/details/77498916 util:properties和context:property-plac ...
- maven插件: shade, assembly
shade插件的作用: 通过版本的exclution无法解决jar冲突的问题, 解决方案是把依赖的包打到本model的jar中,打包的时候由mvn plugin自动修改代码中的依赖jar包名 relo ...
- mediawiki登录时第一次会跳回登录页面，第二次才能登录成功
原因是:LocalSetting.php中的$wgServer属性使用的是ip,改为域名后成功解决问题 补充:改为域名后使用ip访问会出现第一次登录跳回登录界面的情况,应该根据实际情况来设置$wgSe ...