饼图数据加载

cqf

2022-05-23 9e551347cd3b2382ae063b702d20ce4aa7db8505

 src/views/chartAnalysis/index.vue

@@ -1,58 +1,35 @@
<template>
    <div>
        <div class="whole_top">
            <el-form ref="form" :inline="true" :model="form">
            <el-form ref="form" :inline="true" :model="formData">
                <div class="top">
                    <el-form-item label="类别：">
                        <el-checkbox-group v-model="categoryList">
                            <el-checkbox label="生产"></el-checkbox>
                            <el-checkbox label="设备"></el-checkbox>
                            <el-checkbox label="电气"></el-checkbox>
                            <el-checkbox label="仪表"></el-checkbox>
                            <el-checkbox label="安全管理"></el-checkbox>
                            <el-checkbox label="其他"></el-checkbox>
                        <el-checkbox-group v-model="formData.ht_typesub">
                            <el-checkbox v-for="item in YHLXList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="级别：">
                        <el-checkbox-group v-model="levelList">
                            <el-checkbox label="一般隐患D"></el-checkbox>
                            <el-checkbox label="一般隐患C"></el-checkbox>
                            <el-checkbox label="重大隐患B"></el-checkbox>
                            <el-checkbox label="重大隐患A"></el-checkbox>
                        <el-checkbox-group v-model="formData.level">
                            <el-checkbox v-for="item in YHJBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="上级单位：">
                        <el-checkbox-group v-model="superiorUnitList">
                            <el-checkbox label="新疆能源"></el-checkbox>
                            <el-checkbox label="河南能源"></el-checkbox>
                            <el-checkbox label="新疆能源小分队"></el-checkbox>
                            <el-checkbox label="河南能源小分队"></el-checkbox>
                            <el-checkbox label="新疆能源救护大队"></el-checkbox>
                            <el-checkbox label="河南省应急管理厅"></el-checkbox>
                            <el-checkbox label="河南省工信厅"></el-checkbox>
                            <el-checkbox label="所属县市安监部门"></el-checkbox>
                        <el-checkbox-group v-model="formData.superior">
                            <!--                            <el-checkbox v-for="item in JCBMList" :label="item.value"></el-checkbox>-->
                            <el-checkbox v-for="item in JCBMList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="检查类别：" class="checkbox">
                        <el-checkbox-group v-model="inspectionCategoryList">
                            <el-checkbox label="日常检查"></el-checkbox>
                            <el-checkbox label="领导深入现场"></el-checkbox>
                            <el-checkbox label="安全大检查"></el-checkbox>
                            <el-checkbox label="生产系统专业检查"></el-checkbox>
                            <el-checkbox label="设备系统专业检查"></el-checkbox>
                            <el-checkbox label="电气系统专业检查"></el-checkbox>
                            <el-checkbox label="仪表系统专业检查"></el-checkbox>
                            <el-checkbox label="安全管理专业检查"></el-checkbox>
                            <el-checkbox label="其他专项检查"></el-checkbox>
                            <el-checkbox label="双击建设考核"></el-checkbox>
                            <el-checkbox label="安全标准化验收"></el-checkbox>
                            <el-checkbox label="职业卫生健康"></el-checkbox>
                            <el-checkbox label="举一反三"></el-checkbox>
                            <el-checkbox label="安全督察小分队"></el-checkbox>
                        <el-checkbox-group v-model="formData.checktype">
                            <el-checkbox v-for="item in JCLBList" :key="item.value" :value="item.value"
                                         :label="item.value"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="当前警情：">
                        <el-checkbox-group v-model="policeSituationList">
                        <el-checkbox-group v-model="formData.curWarningLevel">
                            <el-checkbox label="轻警"></el-checkbox>
                            <el-checkbox label="低警"></el-checkbox>
                            <el-checkbox label="中警"></el-checkbox>
@@ -60,44 +37,44 @@
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item style="margin-left: 30px;">
                        <el-radio-group v-model="radio">
                            <el-radio :label="1">按隐患单位</el-radio>
                            <el-radio :label="2">按类别</el-radio>
                            <el-radio :label="3">按级别</el-radio>
                            <el-radio :label="4">按检查单位</el-radio>
                            <el-radio :label="5">按录入单位</el-radio>
                            <el-radio :label="6">按检查类别</el-radio>
                            <el-radio :label="7">按当前警情</el-radio>
                        <el-radio-group v-model="formData.model">
                            <el-radio label="1">按隐患单位</el-radio>
                            <el-radio label="2">按类别</el-radio>
                            <el-radio label="3">按级别</el-radio>
                            <el-radio label="4">按检查单位</el-radio>
                            <el-radio label="5">按录入单位</el-radio>
                            <el-radio label="6">按检查类别</el-radio>
                            <el-radio label="7">按当前警情</el-radio>
                        </el-radio-group>
                        <el-radio-group v-model="radio2" style="margin-left: 50px;">
                            <el-radio :label="1">曲线图</el-radio>
                            <el-radio :label="2">饼状图</el-radio>
                            <el-radio :label="3">柱形图</el-radio>
                        <el-radio-group v-model="chartType" style="margin-left: 50px;">
                            <el-radio label="line">曲线图</el-radio>
                            <el-radio label="pie">饼状图</el-radio>
                            <el-radio label="column">柱形图</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="center">
                    <el-form-item label="已选单位：">
                        <el-input v-model="form.name"></el-input>
                        <el-input autosize  v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="已选类别：">
                        <el-input v-model="form.category"></el-input>
                    <el-form-item autosize label="已选类别：">
                        <el-input v-model="formData.ht_typesub.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选级别：">
                        <el-input v-model="form.level"></el-input>
                        <el-input v-model="formData.level.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选上级单位：">
                        <el-input v-model="form.superiorUnit"></el-input>
                        <el-input v-model="formData.superior.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选检查类别：">
                        <el-input v-model="form.inspectionCategory"></el-input>
                        <el-input v-model="formData.checktype.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="已选当前警情：">
                        <el-input v-model="form.policeSituation"></el-input>
                        <el-input v-model="formData.curWarningLevel.join(',')"></el-input>
                    </el-form-item>
                    <el-form-item label="检查时间：" class="time">
                        <el-date-picker
                            v-model="form.time"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
@@ -105,311 +82,406 @@
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >汇总</el-button>
                        <el-button  class="btn" size="small" type="primary" @click="close()"
                        >同比环比</el-button>
                        <el-button class="btn" size="small" type="primary" @click="getData()"
                        >汇总
                        </el-button>
                        <el-button class="btn" size="small" type="primary" @click="close()"
                        >同比环比
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="whole_bottom">
<!--            <div id="myChart" style="width: 100%;height: 550px;"></div>-->
<!--            <div id="circular" style="width: 100%;height: 550px;"></div>-->
            <div id="cylindrical" style="width: 100%;height: 650px;"></div>
            <div v-if="chartType == 'pie'" id="pie" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'line'" id="line" style="width: 100%;height: 550px;"></div>
            <div v-if="chartType == 'column'" id="column" style="width: 100%;height: 650px;"></div>
        </div>
    </div>
</template>
<script>
import {echarts} from "../../global";
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";
import {
    initJCBM,
    initYHLX,
    initBC,
    initJCLB,
    initYHBM,
    initYHJB,
    initLlr,
    initReformStatus
} from "@/api/sgyhpczl/initSelect";

// 导入chart组件
import Highcharts from "highcharts/highstock";
import loadExporting from "highcharts/modules/exporting";
import exportExcel from "highcharts/modules/export-data.src";
import highcharts3d from 'highcharts/highcharts-3d'

loadExporting(Highcharts);
exportExcel(Highcharts);
highcharts3d(Highcharts)


export default {
    name: "index",
    data() {
        return {
            form: {
                name:'众泰煤焦化',
                name: '众泰煤焦化',
                time: '',
                category: '生产',
                level: '一般隐患D',
                superiorUnit: '新疆能源',
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
                chart: null,
            },
            formData:{
                "echart_type": "column", //line:折线图；column：柱状图；pie :饼状图
                "model": "0", //0：
                "beginTime": "2022-04-01", //开始时间
                "endTime": "2022-04-30", //结束时间
                "ht_typesub": "", //隐患类别
                "level": "", //隐患级别
                "superior": "", //上级单位
                "checktype": "", //检查类别
                "curWarningLevel": "" //警情
            formData: {
                "echart_type": "line", //line:折线图；column：柱状图；pie :饼状图
                "model": "1", //0：
                "beginTime": "", //开始时间
                "endTime": "", //结束时间
                "ht_typesub": [], //隐患类别
                "level": [], //隐患级别
                "superior": [], //上级单位
                "checktype": [], //检查类别
                "curWarningLevel": [] //警情
            },
            categoryList: ['生产'],
            levelList:['一般隐患D'],
            levelList: ['一般隐患D'],
            superiorUnitList: ['新疆能源'],
            inspectionCategoryList:['日常检查'],
            inspectionCategoryList: ['日常检查'],
            policeSituationList: ['轻警'],
            radio: 1,
            radio2: 1,
            columnChartData:{}
            chartType: "line",
            columnChartData: {},
            lineChartData: {},
            time: [],
            pieChartData: [],
            JCBMList: [],
            YHLXList: [],
            BCList: [],
            JCLBList: [],
            YHBMList: [],
            YHJBList: [],
            YHZTList: [],
        }
    },
    mounted() {
        this.time.push(this.getCurrentMonthFirst(), this.getCurrentMonthLast());
        this.initYHLX()
        this.initYHJB()
        this.initBC()
        this.initJCLB()
        this.initLlr()
        this.initYHBM()
        this.initYHZT()
        this.changeJCDW(0)
        this.getData()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
            this.formData.echart_type = newVal;
            console.log(this.formData.echart_type)
            this.getData();
        }
    },
    methods: {
        getData(){
            chart_analysis(this.formData).then(res=>{
                let data = res.data;
                if(data.ok){
                    let xList = [];
                    let dataList = [];
                    data.data[0].forEach(n=>{
                        xList.push(n.graph);
                        let singleData = {
                            "name": n.graph,
                            "type": 'bar',
                            "label": "labelOption",
                            "emphasis": {
                                focus: 'series'
                            },
                            "data": [n.yAxes]
        initYHLX() {
            initYHLX().then(res => {
                if (res.data.ok == 1) {
                    this.YHLXList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHJB() {
            initYHJB().then(res => {
                if (res.data.ok == 1) {
                    this.YHJBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHZT() {
            initReformStatus().then(res => {
                if (res.data.ok == 1) {
                    this.YHZTList = res.data.data
                    console.log(this.YHZTList)
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initBC() {
            initBC().then(res => {
                if (res.data.ok == 1) {
                    this.BCList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initJCLB() {
            initJCLB().then(res => {
                if (res.data.ok == 1) {
                    this.JCLBList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initLlr() {
            initLlr().then(res => {
                if (res.data.ok == 1) {
                    this.llrList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        initYHBM() {
            initYHBM().then(res => {
                if (res.data.ok == 1) {
                    this.YHBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        changeJCDW(val) {
            initJCBM(val).then(res => {
                if (res.data.ok == 1) {
                    this.JCBMList = res.data.data
                } else {
                    this.$message({type: 'error', message: res.data.msg, duration: 3000})
                }
            })
        },
        // 饼图
        initEacharts3() {
            var option = {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '众泰煤焦化合隐患单位隐患比例分析',
                    style: {
                        fontWeight: "bold"
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}:' + ' {point.y}%'
                        }
                        dataList.push(singleData);
                    })
                    this.columnChartData.xList = xList;
                    this.columnChartData.dataList = dataList;
                    this.initCloumnChart()
                    // this.initChart()
                    }
                },
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    data: this.pieChartData
                }]
            }
            Highcharts.chart("pie", option);
        },
        getData() {
            this.formData.beginTime = this.time[0]
            this.formData.endTime = this.time[1]
            let requestData = JSON.parse(JSON.stringify(this.formData));
            console.log(requestData)
            requestData.ht_typesub = requestData.ht_typesub.join(",")
            requestData.level = requestData.level.join(",")
            requestData.superior = requestData.superior.join(",")
            requestData.checktype = requestData.checktype.join(",")
            requestData.curWarningLevel = requestData.curWarningLevel.join(",")

            chart_analysis(requestData).then(res => {
                let data = res.data;
                if (data.ok) {
                    console.log(this.formData.echart_type)
                    if (this.formData.echart_type == "column") {
                        this.columnChartData = {};
                        let xList = [];
                        let dataList = [];
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                xList.push(n.graph);
                                let singleData = {
                                    "name": n.graph,
                                    "type": 'bar',
                                    "label": "labelOption",
                                    "emphasis": {
                                        focus: 'series'
                                    },
                                    "data": [n.yAxes]
                                }
                                dataList.push(singleData);
                            })
                        }
                        this.columnChartData.xList = xList;
                        this.columnChartData.dataList = dataList;
                        this.initCloumnChart()
                    } else if (this.formData.echart_type == "line") {
                        this.lineChartData = {}
                        let dataList = [];
                        let timeList = [];
                        if (data.data != null && data.data.length > 0) {
                            data.data[0].forEach(n => {
                                if (timeList.indexOf(n.days) == -1) {
                                    timeList.push(n.days)
                                }
                                let obj = dataList.find(v => v.name == n.catalogy);
                                if (obj == null) {
                                    // obj.data.push(n.counts);
                                    obj = {
                                        name: n.catalogy,
                                        data: [],
                                        type: 'line',
                                        areaStyle: {}
                                    }
                                    dataList.push(obj)
                                }
                            })
                            timeList.forEach(time => {
                                let singileData = data.data[0].filter(n => n.days == time)
                                dataList.forEach(n => {
                                    let searchData = singileData.find(v => v.catalogy == n.name);
                                    if (searchData != null) {
                                        n.data.push(searchData.counts)
                                    } else {
                                        n.data.push(0)
                                    }
                                })
                            })
                        }
                        this.lineChartData.timeList = timeList;
                        this.lineChartData.dataList = dataList;
                        console.log(this.lineChartData)
                        this.initLineChart()
                    } else {
                        this.pieChartData = []
                        data.data[0].forEach(n => {
                            var datas = {
                                name: n.chartName,
                                y: parseInt(n.chartValue),
                                sliced: true,
                                selected: false
                            };
                            this.pieChartData.push(datas);
                        })
                        this.initEacharts3();
                    }
                }

            })
        },
        initChart() {
            // 饼图
            var chartDom = document.getElementById('cylindrical');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend:{
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart(){
            // 折线图
            var chartDom = document.getElementById('cylindrical');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend:{
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: [
                    {
                        name: '电仪车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料二车间',
                        data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产二车间',
                        data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '烧焦二车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '化产一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '炼焦一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '原料一车间',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '众和机电',
                        data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '生产技术部',
                        data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '选煤厂',
                        data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '工程部',
                        data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64],
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: '机电部',
                        data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initCloumnChart(){
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            var chartDom = document.getElementById('column');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend: {
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.lineChartData.timeList
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: this.lineChartData.dataList
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initLineChart() {
            // 折线图
            var chartDom = document.getElementById('line');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '众泰煤焦化各隐患单位隐患走势分析',
                    left: 'center'
                },
                legend: {
                    bottom: 0,
                    // textStyle: {
                    //     color: '#ffffff'
                    // },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.lineChartData.timeList
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                yAxis: {
                    type: 'value'
                },
                color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                series: this.lineChartData.dataList
                // series: [
                //     {
                //         name: '电仪车间',
                //         data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64],
                //         type: 'line',
                //         areaStyle: {}
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
        initCloumnChart() {
            // 柱形图
            var chartDom = document.getElementById('column');
            var myChart = echarts.init(chartDom);
            var option;
            const posList = [
@@ -502,7 +574,8 @@
                    name: {}
                }
            };
            this.columnChartData.dataList.forEach(n=>{
            console.log(this.columnChartData)
            this.columnChartData.dataList.forEach(n => {
                n.label = labelOption;
            })
            option = {
@@ -538,7 +611,8 @@
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        axisTick: {show: false},
                        data: this.columnChartData.xList
                        // data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
@@ -547,7 +621,7 @@
                        type: 'value'
                    }
                ],
                series:this.columnChartData.dataList
                series: this.columnChartData.dataList
                // series: [
                //     {
                //         name: '安全环保部',
@@ -562,95 +636,147 @@
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        }
    }
        },
        getCurrentMonthFirst() {
            var date = new Date();
            date.setDate(1);
            var month = parseInt(date.getMonth() + 1);
            var day = date.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }

            return date.getFullYear() + '-' + month + '-' + day;
        },
        getCurrentMonthLast() {
            var date = new Date();
            var currentMonth = date.getMonth();
            var nextMonth = ++currentMonth;
            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
            var oneDay = 1000 * 60 * 60 * 24;
            var lastTime = new Date(nextMonthFirstDay - oneDay);
            var month = parseInt(lastTime.getMonth() + 1);
            var day = lastTime.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day;
        },
    },


}
</script>

<style scoped>
.top{
.top {
    padding: 10px 5px;
    background: #e4edf4;
    display: flex;
    flex-direction: column;
}
.top /deep/ .el-form-item__label{

.top /deep/ .el-form-item__label {
    width: 110px;
}
.top /deep/ .el-form-item{

.top /deep/ .el-form-item {
    margin-bottom: 5px;
}

/*多选框间距*/
.checkbox /deep/ .el-checkbox-group{
.checkbox /deep/ .el-checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.center{

.center {
    text-align: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0;
}
.center /deep/ .el-form-item__label{

.center /deep/ .el-form-item__label {
    width: auto;
    padding-right: 0;
}

.checkbox {
    display: flex;
}
/deep/ .el-checkbox{

/deep/ .el-checkbox {
    margin-right: 7px;
}
.checkbox /deep/ .el-checkbox{

.checkbox /deep/ .el-checkbox {
    margin-right: 0px;
}
/deep/ .el-checkbox__label{

/deep/ .el-checkbox__label {
    padding-left: 3px;
}
.checkbox /deep/ .el-checkbox__label{

.checkbox /deep/ .el-checkbox__label {
    padding-left: 3px;
}
/deep/ .el-radio{

/deep/ .el-radio {
    margin-right: 7px;
}
.center{

.center {
    display: flex;
    align-items: center;
    justify-content: start;
}
.center /deep/ .el-form-item--medium{

.center /deep/ .el-form-item--medium {
    margin-bottom: 0px;
    display: flex;
}
.center /deep/ .el-input__inner{

.center /deep/ .el-input__inner {
    border: transparent;
    width: 85px;
    padding: 0 5px;
}
.center .time /deep/ .el-form-item__content{

.center .time /deep/ .el-form-item__content {
    width: 70%;
}
.center .time /deep/ .el-input__inner{

.center .time /deep/ .el-input__inner {
    width: 218px;
}

.center .time /deep/ .el-range-input {
    width: 90px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 5px;
}
/deep/ .el-icon-date{

/deep/ .el-icon-date {
    display: none;
}

/*日期*/
/deep/ .el-date-editor .el-range-separator{
/deep/ .el-date-editor .el-range-separator {
    width: auto;
    line-height: 36px;
}
.btn{

.btn {
    background-color: #034ea2;
    border: 1px solid #034ea2;
}