282 lines
12 KiB
Plaintext
282 lines
12 KiB
Plaintext
|
||
@{
|
||
ViewBag.Title = "大屏数据展示";
|
||
}
|
||
<div style="width:100%;background-color:#000D2D;">
|
||
<div style="width:1860px;">
|
||
<div style="width:500px;height:1050px;float:left;margin-left:10px">
|
||
<div style="background-color:#15334D;">
|
||
<div id="tjrs" style="width:500px;height:300px;
|
||
box-shadow: 0px 4px 12px rgba(34, 25, 25, 0.2);
|
||
margin: 1rem;
|
||
margin-top: 1rem;">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background-color:#15334D;">
|
||
<div id="tjrsfl" style="width:500px;height:300px;
|
||
box-shadow: 0px 4px 12px rgba(34, 25, 25, 0.2);
|
||
margin: 1rem;
|
||
margin-top: 1rem;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width:800px;height:1050px;float:left;margin:20px 0px 0px 20px;background-color:#15334D"></div>
|
||
<div style="width:500px;height:1050px;float:left;margin:20px 0px 0px 20px;background-color:#15334D"></div>
|
||
|
||
</div>
|
||
</div>
|
||
@section scripts{
|
||
<style>
|
||
html {
|
||
background-color:#000D2D;
|
||
}
|
||
body{
|
||
background-color:#000D2D;
|
||
}
|
||
</style>
|
||
<script src="@Url.Content("~/Scripts/echarts.min.js")"></script>
|
||
<script src="@Url.Content("~/Scripts/macarons.js")"></script>
|
||
<script src="@Url.Content("~/Scripts/datetime/WdatePicker.js")"></script>
|
||
<script>
|
||
var chart_tjrs;
|
||
var chart_tjrs_option;
|
||
var chart_tjrsfl;
|
||
var chart_tjrsfl_option;
|
||
$(function () {
|
||
chart_tjrs_option = {
|
||
title: {
|
||
text:"体检人数",x:200,textStyle:{fontSize:18}
|
||
},
|
||
tooltip: {
|
||
formatter: "{a} <br/>{c} "
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '全年',
|
||
type: 'gauge',
|
||
fontSize: 12,
|
||
z: 3,
|
||
min: 0,
|
||
max: 220,
|
||
splitNumber: 10,
|
||
radius: '75%',
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
width: 10
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
length: 15, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length: 20, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
title: {
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: 'bolder',
|
||
fontSize: 20,
|
||
fontStyle: 'italic',
|
||
color:'#FFFFFF'
|
||
}
|
||
},
|
||
detail: {
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: 'bolder', fontSize: 18
|
||
}, offsetCenter:[0,"60%"]
|
||
},
|
||
data: [{ value: 0, name: '全年' }]
|
||
},
|
||
{
|
||
name: '本月',
|
||
type: 'gauge',
|
||
center: ['20%', '45%'], // 默认全局居中
|
||
radius: '60%',
|
||
min: 0,
|
||
max: 100,
|
||
endAngle: 45,
|
||
splitNumber: 10,
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
width: 8
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
length: 12, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length: 20, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
pointer: {
|
||
width: 5
|
||
},
|
||
title: {
|
||
offsetCenter: [0, '-30%'], color: '#FFFFFF' // x, y，单位px
|
||
},
|
||
detail: {
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: 'bolder', fontSize: 18
|
||
}, offsetCenter: [0, "60%"]
|
||
},
|
||
data: [{ value: 0, name: '本月' }]
|
||
},
|
||
{
|
||
z: 5,
|
||
name: '今日',
|
||
type: 'gauge',
|
||
center: ['75%', '45%'], // 默认全局居中
|
||
radius: '60%',
|
||
min: 0,
|
||
max: 100,
|
||
startAngle: 120,
|
||
endAngle: -45,
|
||
splitNumber: 10,
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
width: 8
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
length: 12, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
length: 20, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
pointer: {
|
||
width: 5
|
||
},
|
||
title: {
|
||
offsetCenter: [0, '-30%'], color: '#FFFFFF' // x, y，单位px
|
||
},
|
||
detail: {
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: 'bolder',fontSize:18
|
||
}, offsetCenter: [0, "60%"]
|
||
},
|
||
data: [{ value: 0, name: '今日' }]
|
||
}
|
||
]
|
||
};
|
||
chart_tjrs = echarts.init(document.getElementById("tjrs"), "macarons");
|
||
chart_tjrs.setOption(chart_tjrs_option);
|
||
chart_tjrsfl_option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
data: ['食品从业', '药品从业', '公共场所'],
|
||
textStyle: {color:'#FFF'}
|
||
},
|
||
series: [
|
||
{
|
||
name: '体检人数',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
radius: [0, 60],
|
||
|
||
label: {
|
||
normal: {
|
||
position: 'inner'
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 1234, name: '食品从业', selected: true },
|
||
{ value: 234, name: '药品从业' },
|
||
{ value: 895, name: '公共场所' }
|
||
]
|
||
},
|
||
{
|
||
name: '体检人数',
|
||
type: 'pie',
|
||
radius: [80, 120],
|
||
label: {
|
||
normal: {
|
||
formatter: '{b|{b}：}{c} {per|{d}%} ',
|
||
backgroundColor: '#eee',
|
||
borderColor: '#aaa',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
// shadowBlur:3,
|
||
// shadowOffsetX: 2,
|
||
// shadowOffsetY: 2,
|
||
// shadowColor: '#999',
|
||
// padding: [0, 7],
|
||
rich: {
|
||
|
||
b: {
|
||
fontSize: 16,
|
||
lineHeight: 33
|
||
},
|
||
per: {
|
||
color: '#eee',
|
||
backgroundColor: '#334455',
|
||
padding: [2, 4],
|
||
borderRadius: 2
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
|
||
]
|
||
}
|
||
]
|
||
};
|
||
chart_tjrsfl = echarts.init(document.getElementById("tjrsfl"), "macarons");
|
||
chart_tjrsfl.setOption(chart_tjrsfl_option);
|
||
|
||
});
|
||
setInterval(interval, 10 * 1000);
|
||
function interval() {
|
||
$.ajax("@Url.Action("getTjrxTJ")",{type:"post",dataType:"json",success:function(data){
|
||
if(data.State==1)
|
||
{
|
||
chart_tjrs_option.series[0].max = data.bn.max;
|
||
chart_tjrs_option.series[0].data[0].value = data.bn.value;
|
||
chart_tjrs_option.series[1].max = data.by.max;
|
||
chart_tjrs_option.series[1].data[0].value = data.by.value;
|
||
chart_tjrs_option.series[2].max = value = data.jr.max;
|
||
chart_tjrs_option.series[2].data[0].value = value = data.jr.value;
|
||
chart_tjrs.setOption(chart_tjrs_option);
|
||
}
|
||
}});
|
||
}
|
||
</script>
|
||
}
|