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中如何 ...
随机推荐
- Linux的.run文件简单制作
run程序安装包实质上是一个安装脚本加要安装的程序,如下图所示: |-----------------|| || 安装脚本 || ||-----------------|| || 程序 || ||-- ...
- sqlserver2012——存储过程
存储过程:是一组为了完成特定功能的SQL语句,经编译后存储在数据库中. 他们可以接受参数.输出参数.返回单个或者多个结果集以及返回值 存储过程种类 1.用户自定义存储过程 2.系统存储过程 3.扩展存 ...
- Log4NET的日志框架的使用
日志信息分类 1.等级由低到高:debug<info<warn<Error<Fatal; 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系 ...
- JsonParse类
using System.Data; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System; using Syst ...
- [WIP]JavaScript import, export
创建: 2019/06/14 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import h ...
- 微信小程序小结（2） ------ 自定义组件
在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自 ...
- 51nod1091(贪心)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1091 题意:中文题诶- 思路:贪心: 我们先将数据按照左端点 ...
- Selenium2.0+TestNG+Ant+Jenkins自动化测试浅尝
当前常用自动化测试工具 Web自动化测试工具:QTP .selenium等 性能自动化测试工具:loadrunner.jmeter等 接口自动化测试工具:SoapUI.postman等 手机自动化测试 ...
- 清北刷题冲刺 10-30 a.m
星空 #include<iostream> #include<cstdio> using namespace std; int n,m; int main(){ freopen ...
- c语言指针，数组
指针:说简单点就是一个地址.例如int *p,p是个变量,里面放的是地址0x0000,同理,每一个指针,不管什么类型,都是地址,也就是空间都是4个字节(32位机). 以此类推,指针也有指向它的指针in ...