AIPlatform/src/js/console.js

const $ = require('jquery');
require("../css/reset.less")
require("../css/console.less")
require("../images/logo.png")

// import 'zrender/lib/svg/svg';
const echarts = require('echarts');
const {post,setCookie,delCookie} = require('../js/utils.js');

$(function(){
  var mySwiper = new Swiper('.swiper-container',{
    // autoplay : 500,//可选选项，自动滑动
    loop : true,//可选选项，开启循环
    slidesPerView : 3,
  })
  initConsole()
  barChart()
  barChartPay()
  emptyCircle()
})
//控制台数
function initConsole(){
    let url = {
        '本月病历数':require("../images/icon6.png"),
        '本月不合格病历-机器':require("../images/icon7.png"),
        '本月质控数-机器':require("../images/icon10.png"),
        '本月甲级病历-机器':require("../images/icon8.png"),
        '本月乙级病历-机器':require("../images/icon9.png")
    }
    post('/console/mrStatistics',{
        // "endDate": "string",
        // "hospitalId": "string",
        // "limitCount": 0,
        // "startDate": "string",
        "type": 1//1月2年
    }).then((res)=>{
        let data = res.data;
        if(data.code == 0){
          let result = data.data
          for(let i in result){
            let dom = ''
            if(i.indexOf("人工")==-1){
                dom = `
                    <li class="partLi">
                        <div class="partIn">
                            <p class="top">${i.split("-")[0]}</p>
                            <p class="btm clearfix">
                            <img src="${url[i]}" alt="">
                            <span>${result[i]}</span>
                            </p>
                        </div>
                    </li>
                `
            }
            $(".partAll").append(dom)
          }
        }
    })
}
//柱状图
function barChart(){
    var myChart = echarts.init(document.getElementById('barChart'));
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {//x轴刻度
                    textStyle: {
                        color: 'blue'
                    }
                },
                axisLine: {//x轴
                    lineStyle:{
                        color:'red'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {//y轴
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {//y轴刻度
                    textStyle: {
                        color: 'red'
                    }
                },
                splitLine:{//分割线
                    lineStyle:{
                        color:'red'
                    }
                }
            }
            
        ],
        title:[{
            text: '医院运行指标',
            top: 20,
            left: 20,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '30%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    myChart.setOption(option);
    
}
//柱状图
function barChartPay(){
    var myChart = echarts.init(document.getElementById('barChartPay'));
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {//x轴刻度
                    textStyle: {
                        color: 'blue'
                    }
                },
                axisLine: {//x轴
                    lineStyle:{
                        color:'red'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {//y轴
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {//y轴刻度
                    textStyle: {
                        color: 'red'
                    }
                },
                splitLine:{//分割线
                    lineStyle:{
                        color:'red'
                    }
                }
            }
            
        ],
        title:[{
            text: '医院运行指标',
            top: 20,
            left: 20,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '30%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    myChart.setOption(option);
    
}
//空心饼图
function emptyCircle(){
    var myChart = echarts.init(document.getElementById('emptyCircle'));
    option = {
        color:['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 10,
        //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },    
        title: [{
            text: '总病\n例数',
            subtext:"1000",
            top: 'center',
            left: 'center',
            textStyle: {
                
            },
            subtextStyle:{
                color:'red',
                fontSize:'14px'
            }
        }],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                },
                labelLine:{
                    show:false
                },
                emphasis: {//圆盘中心
                    label: {
                        show: false,
                        fontSize: '30',
                        fontWeight: 'bold'
                    },
                },
                labelLine: {
                    show: true
                },
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
}