gary_wms/phb/dist/js/pages/dashboard3.js

/* global Chart:false */

$(function () {
    'use strict'

    var ticksStyle = {
        fontColor: '#495057',
        fontStyle: 'bold'
    }

    var mode = 'index'
    var intersect = true

    var $salesChart = $('#sales-chart')
    // eslint-disable-next-line no-unused-vars
    var salesChart = new Chart($salesChart, {
        type: 'bar',
        data: {
            labels: ['觀音', '萬華', '淡水', '桃園', '新莊', '新竹', '新店','宜蘭'],
            datasets: [
                {
                    backgroundColor: '#007bff',
                    borderColor: '#007bff',
                    label:'台数',
                    data: [1,1,1,2,4,11,5,1]
                }
            ]
        },
        options: {
            maintainAspectRatio: true,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: true
            },
            scales: {
                yAxes: [{
                    display: false,
                    gridLines: {
                        display: false,
                        lineWidth: '1px',
                        color: 'rgba(0, 0, 0, .2)',
                        zeroLineColor: 'transparent'
                    },
                    ticks: $.extend({
                        beginAtZero: true,
                        // Include a dollar sign in the ticks
                        callback: function (value) {
                            if (value >= 1000) {
                                value /= 1000
                                value += 'k'
                            }

                            return  value
                        }
                    }, ticksStyle)
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            animation: {           // 这部分是数值显示的功能实现
                onComplete: function () {
                    var chartInstance = this.chart,

                    ctx = chartInstance.ctx;
                    // 以下属于canvas的属性（font、fillStyle、textAlign...）
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.fillStyle = "black";
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            }

        }
    })

    //-------------
    //梯龄    bar 图

    var $pieChartCanvasage = $('#pieChartage')

    var eleageChart = new Chart($pieChartCanvasage, {
        type: 'bar',
        data: {
            labels: [
                '1-3年',
                '2-5年',
                '5-8',
                '8年以上'

            ],
            datasets: [
                {
                    backgroundColor: '#007bff',
                    borderColor: '#007bff',
                    label:'台数',
                    data: [2,4,6,8]
                }
            ]
        },
        options: {
            maintainAspectRatio: true,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: true
            },
            scales: {
                yAxes: [{
                    display: false,
                    gridLines: {
                        display: false,
                        lineWidth: '1px',
                        color: 'rgba(0, 0, 0, .2)',
                        zeroLineColor: 'transparent'
                    },
                    ticks: $.extend({
                        beginAtZero: true,
                        // Include a dollar sign in the ticks
                        callback: function (value) {
                            if (value >= 1000) {
                                value /= 1000
                                value += 'k'
                            }

                            return  value
                        }
                    }, ticksStyle)
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            animation: {           // 这部分是数值显示的功能实现
                onComplete: function () {
                    var chartInstance = this.chart,

                        ctx = chartInstance.ctx;
                    // 以下属于canvas的属性（font、fillStyle、textAlign...）
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.fillStyle = "black";
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            }

        }
    })

 

    // Get context with jQuery - using jQuery's .get() method.
    //梯形
    var pieChartCanvas = $('#pieChart')
    var pieData = {
        labels: [
            '家用梯100%（349））'
        ],
        datasets: [
            {
                data: [349],
                backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
            }
        ]
    }
    var pieOptions = {
        legend: {
            display: true
        }
    }
    var pieChart = new Chart(pieChartCanvas, {
        type: 'pie',
        data: pieData,
        options: pieOptions
    });

    //环形图 故障类型
    var doughnutDataCanvas = $('#doughnutChart')
    var doughnutData = {
        labels: [
            '门开时运行(A1207)（2）',
            '急停模式停止（A5）(4)',
            '运行中急停(安全回路断路)（A1100）(1)'
        ],
        datasets: [
            {
                data: [2,4,1],
                backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
            }
        ]
    }
    var doughnutOptions = {
        legend: {
            display: true
        }
    }
    //doughnut 环形
    var pieChartage = new Chart(doughnutDataCanvas, {
        type: 'doughnut',
        data: doughnutData,
        options: doughnutOptions
    });


    //折线图
    var lineChartCanvas = $('#lineChart')
    let linedata = {
        "labels": ["1", "2", "3", "4", "5", "6", "7"],
        "datasets": [{
            "label": "走形时间",
            "data": [65, 59, 80, 81, 56, 55, 40],
            "fill": false,
            "borderColor": "rgb(75, 192, 192)",
            "lineTension": 0.1
        },{
            "label": "走形次数",
            "data": [6, 9, 8, 11, 15, 8, 1],
            "fill": false,
            "borderColor": "rgb(75, 192, 192)",
            "lineTension": 0.1
        }]
    };
    const optsLineChart = {
        scales: {
            x: {
                time: false,
            },
            y: {
                range: [0, 100],
            },
        },
        series: [
            {},
            {
                fill: 'transparent',
                width: 5,
                stroke: 'rgba(60,141,188,1)',
            },
            {
                stroke: '#c1c7d1',
                width: 5,
                fill: 'transparent',
            },
        ],
    };

    var lineChart = new Chart(lineChartCanvas, {
        type: 'line',
        data: linedata,
        options: optsLineChart
    });
})