LargeScreenVisualization/viewdata-master/新增75套源码/48/js/bar.js

/*大屏*/
(function () {
    var chart1 = echarts.init(document.getElementById('bchart1'));
    var chart2 = echarts.init(document.getElementById('bchart2'));
    var chart3 = echarts.init(document.getElementById('bchart3'));
    var chart4 = echarts.init(document.getElementById('bchart4'));
    var chart5 = echarts.init(document.getElementById('bchart5'));


    var option = [{
        //故障代码
            title: {
                textStyle: {
                    color: '#2b8fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["74", "729", "1308", "1405", "247", "613", "87"],
                axisLabel: {
                    // X 轴标签
                    
                    rotate: 40,
                    fontSize: 10
                },
                // 坐标轴线相关设置设置
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }

            },
            yAxis: {
                show:false,
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '10%',
                containLabel: true
            },
            series: [{
                    name: '浅蓝',
                    type: 'bar',
                    data: [30, 50, 70, 30, 40, 50, 60],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                    barWidth: 15,
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        color: '#19ffe9'
                    }
                },
                {
                    name: '折线',
                    type: 'line',
                    smooth: true,
                    data: [30, 50, 70, 30, 40, 50, 60],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                }
            ],
            textStyle: {
                color: "#1eb0dc"
            }
        },
        //酒机停机趋势
        {
            title: {
                textStyle: {
                    color: '#2b8fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
                axisLabel: {
                    // X 轴标签
                    // rotate: 30,
                    fontSize: 10
                },
                // 坐标轴线相关设置设置
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }

            },
            yAxis: {
                show:false,
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '24%',
                containLabel: true
            },
            series: [{
                    name: '浅蓝',
                    type: 'bar',
                    data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30, 10, 60],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        color: '#19ffe9'
                    }
                },
                {
                    name: '折线',
                    type: 'line',
                    smooth: true,
                    data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30, 10, 60],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                }
            ],
            textStyle: {
                color: "#1eb0dc"
            }
        },
        //当班TOP状态
        {
            title: {
                textStyle: {
                    color: '#2b8fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["137", "120", "83", "75", "73", "45", "129", "87", "56", "11", "128", "48", "48", "28", "65"],
                axisLabel: {
                    // X 轴标签
                    // rotate: 30,
                    fontSize: 10
                },
                // 坐标轴线相关设置设置
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }

            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '20%',
                containLabel: true
            },
            series: [{
                    name: '浅蓝',
                    type: 'bar',
                    data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        color: '#19ffe9'
                    }
                }
            ],
            textStyle: {
                color: "#1eb0dc"
            }
        },
         //当班液位状态
        {
            title: {
                textStyle: {
                    color: '#2b8fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19","20","21","22","23","24","25"],
                axisLabel: {
                    // X 轴标签
                    // rotate: 30,
                    fontSize: 10
                },
                // 坐标轴线相关设置设置
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }

            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '20%',
                containLabel: true
            },
            series: [{
                    name: '浅蓝',
                    type: 'bar',
                    data: [550, 605, 556, 570, 584, 556, 587,594, 578, 571, 560, 569, 574, 566, 577,550, 605, 556, 570, 584, 556, 587,594, 578, 571],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        color: '#19ffe9'
                    }
                }
            ],
            textStyle: {
                color: "#1eb0dc"
            }
        },
        //酒机费用趋势
        {
            title: {
                textStyle: {
                    color: '#2b8fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["18", "20", "24", "30", "35", "25", "38", "40", "42", "44", "43", "45", "47", "49", "50"],
                axisLabel: {
                    // X 轴标签
                    // rotate: 30,
                    fontSize: 10
                },
                // 坐标轴线相关设置设置
                axisLine: {
                    show:true,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }

            },
            yAxis: {
                show:false,
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1eb0dc'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '29%',
                containLabel: true
            },
            series: [{
                    name: '浅蓝',
                    type: 'bar',
                    data: [0, 30, 20, 15, 30, 10, 20, 30, 28, 20, 22, 27, 16, 18, 0],
                    itemStyle: {
                        color: '#19ffe9'
                    },
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 10,
                        color: '#19ffe9'
                    }
                }
            ],
            textStyle: {
                color: "#1eb0dc"
            }
        },
       
    ];


    // 使用刚指定的配置项和数据显示图表
    chart1.setOption(option[0])
    chart2.setOption(option[1])
    chart3.setOption(option[2])
    chart4.setOption(option[3])
    chart5.setOption(option[4])

    window.addEventListener('resize', function () {
        chart1.resize();
        chart2.resize();
        chart3.resize();
        chart4.resize();
        chart5.resize();
        
    })
    // 屏幕适配
})()