JavaScript 1
var optiontext = {
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
length: 20
},
},
{
type: 'category',
data: [
{
value: 'First week',
textStyle: {
fontSize: 18,
lineHeight: 70
}
},
{
value: 'Second weeks',
textStyle: {
fontSize: 18,
lineHeight: 70
}
}
],
position: 'bottom',
axisTick: {
length: 50
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.5)', 'rgba(200,200,200,0.5)']
}
}
},
],
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
color: 'orange'
}]
};
二.
后台处理数据 ，将数据以字符串的方式存储json数据
public ActionResult GetDeviceMaintenance() {
bool IsTrue = false;
string Msg = string.Empty;
List<Maintenance> MaintenanceList = new List<Maintenance>();
List<string> MonthList = new List<string>();
List<string> CCDList = new List<string>();
List<string> plasmaList = new List<string>();
List<string> SFJList = new List<string>();
List<string> TMJList = new List<string>();
List<string> YSQList = new List<string>();
List<string> DYJList = new List<string>();
try
{
string sqlstr = string.Format(" SELECT * FROM(SELECT device_name, COUNT(maintenance_month) valueSum, maintenance_month FROM equipment_maintenance WHERE "+
" device_name IN('锁付机', 'plasma', '贴膜机', '打印机', '扬声器', 'CCD') AND maintainer IS NULL "
+ " GROUP BY maintenance_month, device_name ORDER BY id, SUBSTRING(maintenance_month, 3, 2), SUBSTRING(maintenance_month, 6, 2)) t1, "
+ " (SELECT device_name, COUNT(maintenance_month) Sum, maintenance_month FROM equipment_maintenance WHERE "
+ " device_name IN('锁付机', 'plasma', '贴膜机', '打印机', '扬声器', 'CCD') GROUP BY maintenance_month, device_name ORDER BY id, "
+ " SUBSTRING(maintenance_month, 3, 2), SUBSTRING(maintenance_month, 6, 2)) t2 WHERE t1.maintenance_month = t2.maintenance_month and "
+ " t1.Device_name = t2.device_name ");
DataTable dt = DBHeleperMysqlMaintain.GetTable(sqlstr);
foreach (DataRow dr in dt.Rows)
{
Maintenance ma = new Maintenance();
ma.Device_Name = dr["Device_Name"].ToString();
ma.MaintenanceMonth = dr["maintenance_month"].ToString();
ma.ValueSum = Convert.ToDouble(dr["ValueSum"].ToString());
ma.Sum = Convert.ToDouble(dr["Sum"].ToString());
if (!MonthList.Contains(dr["maintenance_month"].ToString()))
{
MonthList.Add(dr["maintenance_month"].ToString());
}
switch (ma.Device_Name)
{
case "CCD":
CCDList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100*ma.ValueSum)/ma.Sum).ToString("0.00") + '"');
break;
case "PLASMA":
plasmaList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100 * ma.ValueSum) / ma.Sum).ToString("0.00") + '"');
break;
case "锁付机":
SFJList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100 * ma.ValueSum) / ma.Sum).ToString("0.00") + '"');
break;
case "贴膜机":
TMJList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100 * ma.ValueSum) / ma.Sum).ToString("0.00") + '"');
break;
case "打印机":
DYJList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100 * ma.ValueSum) / ma.Sum).ToString("0.00") + '"');
break;
case "扬声器":
YSQList.Add('"' + ma.MaintenanceMonth + '"' + ":" + '"' + ((100 * ma.ValueSum) / ma.Sum).ToString("0.00") + '"');
break;
default:
break;
}
MaintenanceList.Add(ma);
}
IsTrue = true;
Msg = "数据获取成功！";
}
catch (Exception ex)
{
IsTrue = false;
Msg = ex.ToString();
}
return Json(new { IsTrue = IsTrue, Msg = Msg, MaintenanceList = MaintenanceList, MonthList = MonthList, CCDList = CCDList,
plasmaList = plasmaList, SFJList= SFJList, TMJList= TMJList, DYJList= DYJList, YSQList = YSQList });
}
JavaScript
var Month = [];
var DeviceName = [];
var ValueSum = [];
var Sum = [];
var Data = [];
var MonthStr = [];
var DeviceStr = '';
var CCDStr = '{"product": "CCD",';
var plasmastr = '{"product": "PLASMA",';
var SFJstr = '{"product": "锁附机",';
var TMJstr = '{"product": "贴膜机",';
var DYJstr = '{"product": "打印机",';
var YSQstr = '{"product": "扬声器",';
$.ajax({
url: 'GetDeviceMaintenance',
datatype: 'json',
type: 'post',
data: {},
success: function (res) {
if (res.IsTrue)
{
Month.push('product');
for (var i = 0; i < res.MonthList.length; i++)
{
Month.push(res.MonthList[i]);
}
for (var i = 0; i < res.CCDList.length; i++)
{
if (i < res.CCDList.length-1) {
CCDStr += res.CCDList[i]+',';
}
else
{
CCDStr += res.CCDList[i]+'}'
}
}
for (var i = 0; i < res.plasmaList.length; i++) {
if (i < res.CCDList.length - 1) {
plasmastr += res.plasmaList[i] + ',';
}
else {
plasmastr += res.plasmaList[i] + '}'
}
}
for (var i = 0; i < res.SFJList.length; i++) {
if (i < res.SFJList.length - 1) {
SFJstr += res.SFJList[i] + ',';
}
else {
SFJstr += res.SFJList[i] + '}'
}
}
for (var i = 0; i < res.TMJList.length; i++) {
if (i < res.TMJList.length - 1) {
TMJstr += res.TMJList[i] + ',';
}
else {
TMJstr += res.TMJList[i] + '}'
}
}
for (var i = 0; i < res.DYJList.length; i++) {
if (i < res.DYJList.length - 1) {
DYJstr += res.DYJList[i] + ',';
}
else {
DYJstr += res.DYJList[i] + '}'
}
}
for (var i = 0; i < res.YSQList.length; i++) {
if (i < res.YSQList.length - 1) {
YSQstr += res.YSQList[i] + ',';
}
else {
YSQstr += res.YSQList[i] + '}'
}
}
***将字符串转化为JSon格式***
var CCDjson = JSON.parse(CCDStr);
var plasmaJSON = JSON.parse(plasmastr);
var SFJjson = JSON.parse(SFJstr);
var TMJJSON = JSON.parse(TMJstr);
var DYJjson = JSON.parse(DYJstr);
var YSQJSON = JSON.parse(YSQstr);
var option = {
title: [
{
text: '六种重点设备保养完成率', //大标题
//subtext: '本月数据', //类似于副标题
x: 'center' //标题位置 居中
}
],
grid: {
top: '10%',
left: '0%',
right: '2%',
bottom: '20px',
containLabel: true
},
legend: {
bottom: 0,
},
tooltip: {},
dataset: {
//dimensions: ['product', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
dimensions:Month,
source: [
//{ product: '打印机', '2019-9': 43.3, '2020-2': 85.8, '2020-3': 85.8, '2020-4': 85.8, '2020-5': 85.8, '2020-6': 85.8, '2020-7': 85.8, '2020-8': 85.8, '2020-9': 85.8, '2020-10': 85.8, '2020-11': 81.3, '2020-12': 83.3 },
CCDjson,
plasmaJSON,
SFJjson,
TMJJSON,
DYJjson,
YSQJSON,
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: '#5184F2',
},
color: '#5184F2',
},
},
},
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
color: 'green',
},
},
}
,
{
type: 'bar', itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
,
{
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
}
},
lineStyle: {
color: 'green',
},
//color: 'green',
},
},
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('TotalDevice'));
myChart.setOption(option);
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
