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>
|
|||
|
|
}
|