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