everlight.eap/front/dashboard/js/me-dashboard/index.js

$(function () {

    echart_3();

    echart_status_chart();

    renderPMChart();
    renderEquipmentChart();
    renderMTBAChart();
    renderAlarmChart();
    renderPmCharge();

    // 中间机台运行状态占比图
    function echart_status_chart() {
        var chart = echarts.init(document.getElementById('rateChart'))
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}台 ({d}%)'
            },
            series: [
                {
                    name: '稼动',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['12.5%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: '16',
                        fontWeight: 'bold',
                        formatter: function (param) {
                            console.log(param);
                            if (param.dataIndex === 0) {
                                return param.percent + '%\n'
                                    + param.data.value + '台';
                            }
                            return '';
                        }

                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '20',
                            fontWeight: 'bold',
                        }
                    },
                    labelLine: {
                        show: false
                    },

                    data: [
                        {
                            value: 200, name: '稼动', itemStyle: {
                                normal: {
                                    color: `rgb(61,149,73)`
                                }
                            }
                        },
                        {
                            value: 100, name: '其它', itemStyle: {
                                normal: {
                                    color: `rgb(255,255,255)`
                                }
                            }
                        }
                    ]
                },
                {
                    name: '报警',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['37.5%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: '16',
                        fontWeight: 'bold',
                        formatter: function (param) {
                            if (param.dataIndex === 0) {
                                return param.percent + '%\n'
                                    + param.data.value + '台';
                            }
                            return '';
                        }

                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },

                    data: [
                        {
                            value: 50, name: '报警', itemStyle: {
                                normal: {
                                    color: `rgb(255,0,0)`
                                }
                            }
                        },
                        {
                            value: 200, name: '其它', itemStyle: {
                                normal: {
                                    color: `rgb(255,255,255)`
                                }
                            }
                        }
                    ]
                },
                {
                    name: '待机',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['62.5%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: '16',
                        fontWeight: 'bold',
                        formatter: function (param) {
                            if (param.dataIndex === 0) {
                                return param.percent + '%\n'
                                    + param.data.value + '台';
                            }
                            return '';
                        }

                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },

                    data: [
                        {
                            value: 150, name: '待机', itemStyle: {
                                normal: {
                                    color: `rgb(178,178,0)`
                                }
                            }
                        },
                        {
                            value: 200, name: '其它', itemStyle: {
                                normal: {
                                    color: `rgb(255,255,255)`
                                }
                            }
                        }
                    ]
                },
                {
                    name: '离线',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['87.5%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: '16',
                        fontWeight: 'bold',
                        formatter: function (param) {
                            if (param.dataIndex === 0) {
                                return param.percent + '%\n'
                                    + param.data.value + '台';
                            }
                            return '';
                        }

                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },

                    data: [

                        {
                            value: 30, name: '离线', itemStyle: {
                                normal: {
                                    color: `rgb(178,178,178)`
                                }
                            }
                        },
                        {
                            value: 400, name: '其它', itemStyle: {
                                normal: {
                                    color: `rgb(255,255,255)`
                                }
                            }
                        }
                    ]
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener("resize", function () {
            chart.resize();
        });
    }

    // 保养率图表
    function renderPMChart() {
        var elementName = 'pmChart';
        var chart;
        var xdata = ['未来城园区2F', '2园区2F', '3园区2F', '未来城园区1F', '2园区1F', '3园区1F']
        var options = {
            chart: {
                type: 'column',
                renderTo: elementName,
                // marginBottom: 30,
                // marginLeft: 20,
                // marginTop: 20,
                // marginRight: 20,
                margin: 30,
                marginBottom: 60,
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 30,
                    beta: 0,
                    depth: 70,
                    viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
                    frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
                        // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
                        // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
                        bottom: {
                            size: 20
                        },
                        side: {
                            size: 1,
                            color: 'transparent'
                        },
                        back: {
                            size: 1,
                            color: 'transparent'
                        }
                    }
                },
            },
            title: {
                text: null
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            colors: ['#7cb5ec', '#e4d354'],
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: xdata,
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            series: []
        };
        var series = [{
            name: '已保养',
            data: [50, 60, 42, 44, 68, 92],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                formatter: function () {
                    return this.y;
                }
            }
        }, {
            name: '全部',
            data: [67, 60, 56, 50, 90, 100],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                formatter: function () {
                    return this.y;
                }
            }
        }];
        options.series = series;
        chart = Highcharts.chart(options);
    }

    // MTBA
    function renderMTBAChart() {
        var elementName = 'chart_2';
        var chart;
        var xdata = ['DA', 'WB', 'LHA', 'AA']
        var options = {
            chart: {
                type: 'column',
                renderTo: elementName,
                // marginBottom: 30,
                // marginLeft: 20,
                // marginTop: 20,
                // marginRight: 20,
                margin: 30,
                marginBottom: 60,
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 30,
                    beta: 0,
                    depth: 70,
                    viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
                    frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
                        // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
                        // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
                        bottom: {
                            size: 20
                        },
                        side: {
                            size: 1,
                            color: 'transparent'
                        },
                        back: {
                            size: 1,
                            color: 'transparent'
                        }
                    }
                },
            },
            title: {
                text: null
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            colors: ['#AAEEEE'],
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: xdata,
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            series: []
        };
        var series = [{
            name: 'MTBA',
            data: [10.2, 8.6, 22.3, 32.2],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                formatter: function () {
                    return this.y;
                }
            }
        }];
        options.series = series;
        chart = Highcharts.chart(options);
    }

    // 各车间设备数量
    function renderEquipmentChart() {
        var elementName = 'chart_1';
        var chart;
        var xdata = ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6']
        var options = {
            chart: {
                type: 'column',
                renderTo: elementName,
                // marginBottom: 30,
                // marginLeft: 20,
                // marginTop: 20,
                // marginRight: 20,
                margin: 30,
                marginBottom: 60,
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 30,
                    beta: 0,
                    depth: 70,
                    viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
                    frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
                        // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
                        // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
                        bottom: {
                            size: 20
                        },
                        side: {
                            size: 1,
                            color: 'transparent'
                        },
                        back: {
                            size: 1,
                            color: 'transparent'
                        }
                    }
                },
            },
            title: {
                text: null
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            colors: ['#44A9A8'],
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: xdata,
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            series: []
        };
        var series = [{
            name: '数量',
            data: [100, 120, 88, 124, 78, 92],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                formatter: function () {
                    return this.y;
                }
            }
        }];
        options.series = series;
        chart = Highcharts.chart(options);
    }

    // 报警TOP5
    function renderAlarmChart() {
        var elementName = 'alarmChart';
        var chart;
        var xdata = ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6']
        var options = {
            chart: {
                type: 'column',
                renderTo: elementName,
                // marginBottom: 30,
                // marginLeft: 20,
                // marginTop: 20,
                // marginRight: 20,
                margin: 30,
                marginBottom: 60,
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 30,
                    beta: 0,
                    depth: 70,
                    viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
                    frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
                        // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
                        // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
                        bottom: {
                            size: 20
                        },
                        side: {
                            size: 1,
                            color: 'transparent'
                        },
                        back: {
                            size: 1,
                            color: 'transparent'
                        }
                    }
                },
            },
            title: {
                text: null
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            colors: ['#FF0000'],
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: xdata,
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    style: {
                        color: '#fff'
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.3)'
            },
            series: []
        };
        var series = [{
            name: '数量',
            data: [100, 120, 88, 124, 78, 92],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                formatter: function () {
                    return this.y;
                }
            }
        }];
        options.series = series;
        chart = Highcharts.chart(options);
    }

    // 保养费用
    function renderPmCharge() {
        var chart = Highcharts.chart('chargeChart', {
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: null
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '各园区费用占比',
                data: [
                    { name: '2号园区', y: 100,drilldown: '2号园区'},
                    {name: '3号园区', y: 120, drilldown: '3号园区'},
                    {
                        name: '未来城园区',
                        y: 230,
                        drilldown:'未来城园区'
                    }
                ],
                dataLabels: {
                    distance: 5
                }
            }],
            drilldown: {
                series: [{
                    type: 'pie',
                    name: '2号园区',
                    data: [
                        ['车间1', 30],
                        ['车间2', 50],
                        {
                            name: '车间3',
                            y: 20,
                        }, {
                            name: '车间4',
                            y: 25
                        }
                    ]
                },
                {
                    type: 'pie',
                    name: '3号园区',
                    data: [
                        ['车间1', 30],
                        ['车间2', 50],
                        {
                            name: '车间3',
                            y: 20,
                        }, {
                            name: '车间4',
                            y: 25
                        }
                    ]
                },
                {
                    type: 'pie',
                    name: '未来城园区',
                    data: [
                        ['车间1', 30],
                        ['车间2', 50],
                        {
                            name: '车间3',
                            y: 20,
                        }, {
                            name: '车间4',
                            y: 25
                        }
                    ]
                }
            ]
            }
        });
    }

    //echart_3货物周转量
    function echart_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_3'));
        myChart.clear();
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['DA', 'WB', 'LHA', 'AA'],
                textStyle: {
                    color: '#fff'
                },
                top: '8%'
            },
            grid: {
                top: '23%',
                left: '3%',
                right: '7%',
                bottom: '8%',
                containLabel: true
            },
            color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['8:00', '9:00', '10:00', '11:00', '12:00'],
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {

                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: 'DA',
                    type: 'line',
                    data: [3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
                },
                {
                    name: 'WB',
                    type: 'line',
                    data: [3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
                },
                {
                    name: 'LHA',
                    type: 'line',
                    data: [14.77, 15.17, 13.17, 14.56, 15.84]
                },
                {
                    name: 'AA',
                    type: 'line',
                    data: [686.17, 847.26, 895.22, 865.28, 886.72]
                }
            ]
        };
        myChart.setOption(option);
    }
    //湖南高速公路
    function echart_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_4'));
        option = {
            title: {
                text: '南丁格尔玫瑰图',
                subtext: '纯属虚构',
                left: 'center',
                show: false
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: ['费用1', '费用2', '费用3', '费用4', '费用5', '费用6', '费用7', '费用8'],
                show: false
            },
            series: [

                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [30, 90],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    data: [
                        { value: 10, name: '费用1' },
                        { value: 5, name: '费用2' },
                        { value: 15, name: '费用3' },
                        { value: 25, name: '费用4' },
                        { value: 20, name: '费用5' },
                        { value: 35, name: '费用6' },
                        { value: 30, name: '费用7' },
                        { value: 40, name: '费用8' }
                    ]
                }
            ]
        };
        myChart.setOption(option);
        // 使用刚指定的配置项和数据显示图表。
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    //报警TOP5
    function echart_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_5'));

        function showProvince() {
            var option = {
                color: ['#3398DB'],
                legend: {
                    top: "0%",
                    textStyle: {
                        color: "rgba(255,255,255,0.9)"//图例文字
                    },
                    show: false
                },
                xAxis: {
                    type: 'category',
                    data: ['车间1', '车间5', '车间2', '车间3', '车间6'],
                    axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
                    axisLabel: {
                        textStyle: { color: "rgba(255,255,255,1)", fontSize: '14', },
                    },
                },
                yAxis: {
                    type: 'value',

                    axisLabel: {
                        textStyle: { color: "rgba(255,255,255,1)", fontSize: '14', },
                    },
                },
                series: [{
                    data: [10, 15, 8, 7.2, 6.3],
                    type: 'bar',
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: '{c}%'
                    }
                }]
            };
            myChart.setOption(option);
        }
        showProvince();

        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //#region 点击跳转
    // $('#chart_map').click(function () {
    //     window.location.href = './page/index.html';
    // });
    // $('.t_btn2').click(function () {
    //     window.location.href = "./page/index.html?id=2";
    // });
    // $('.t_btn3').click(function () {
    //     window.location.href = "./page/index.html?id=3";
    // });
    // $('.t_btn4').click(function () {
    //     window.location.href = "./page/index.html?id=4";
    // });
    // $('.t_btn5').click(function () {
    //     window.location.href = "./page/index.html?id=5";
    // });
    // $('.t_btn6').click(function () {
    //     window.location.href = "./page/index.html?id=6";
    // });
    // $('.t_btn7').click(function () {
    //     window.location.href = "./page/index.html?id=7";
    // });
    // $('.t_btn8').click(function () {
    //     window.location.href = "./page/index.html?id=8";
    // });
    // $('.t_btn9').click(function () {
    //     window.location.href = "./page/index.html?id=9";
    // });
    //#endregion
});