From b56ab52b724ba0d80761ac78183b968d28e3b75a Mon Sep 17 00:00:00 2001
From: panzy <225@qq.com>
Date: 星期六, 21 五月 2022 07:58:12 +0800
Subject: [PATCH] 页面优化,接入柱状图

---
 src/views/chartAnalysis/index.vue |  627 +++++++++++++++++++++++++--------------------------------
 1 files changed, 275 insertions(+), 352 deletions(-)

diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue
index 103dab2..816b21a 100644
--- a/src/views/chartAnalysis/index.vue
+++ b/src/views/chartAnalysis/index.vue
@@ -122,6 +122,7 @@
 </template>
 <script>
 import {echarts} from "../../global";
+import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";
 
 export default {
     name: "index",
@@ -136,6 +137,17 @@
                 inspectionCategory: '日常检查',
                 policeSituation: '轻警',
             },
+            formData:{
+                "echart_type": "column", //line:折线图;column:柱状图;pie :饼状图
+                "model": "0", //0:
+                "beginTime": "2022-04-01", //开始时间
+                "endTime": "2022-04-30", //结束时间
+                "ht_typesub": "", //隐患类别
+                "level": "", //隐患级别
+                "superior": "", //上级单位
+                "checktype": "", //检查类别
+                "curWarningLevel": "" //警情
+            },
             categoryList: ['生产'],
             levelList:['一般隐患D'],
             superiorUnitList: ['新疆能源'],
@@ -143,227 +155,259 @@
             policeSituationList: ['轻警'],
             radio: 1,
             radio2: 1,
+            columnChartData:{}
         }
     },
     mounted() {
-        this.initChart()
+        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 sigleData = {
+                            "name": n.graph,
+                            "type": 'bar',
+                            "label": "labelOption",
+                            "emphasis": {
+                                focus: 'series'
+                            },
+                            "data": [n.yAxes]
+                        }
+                        dataList.push(sigleData);
+                    })
+                    this.columnChartData.xList = xList;
+                    this.columnChartData.dataList = dataList;
+                    this.initCloumnChart()
+                    // this.initChart()
+                }
+
+            })
+        },
         initChart() {
-            // 折线图
-            // 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)
-
             // 饼图
+            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)
-
+            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 myChart = echarts.init(chartDom);
@@ -458,6 +502,9 @@
                     name: {}
                 }
             };
+            this.columnChartData.dataList.forEach(n=>{
+                n.label = labelOption;
+            })
             option = {
                 tooltip: {
                     trigger: 'axis',
@@ -467,7 +514,8 @@
                 },
                 legend: {
                     bottom: 0,
-                    data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
+                    data: this.columnChartData.xList
+                    // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
                 },
                 grid: {
                     left: '3%',
@@ -499,145 +547,20 @@
                         type: 'value'
                     }
                 ],
-                series: [
-                    {
-                        name: '安全环保部',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [320]
-                    },
-                    {
-                        name: '电仪车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [332]
-                    },
-                    {
-                        name: '干熄焦',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [150]
-                    },
-                    {
-                        name: '工程部',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [541]
-                    },
-                    {
-                        name: '化产二车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [256]
-                    },
-                    {
-                        name: '化产一车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [351]
-                    },
-                    {
-                        name: '机电部',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [122]
-                    },
-                    {
-                        name: '炼焦二车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [220]
-                    },
-                    {
-                        name: '炼焦一车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [255]
-                    },
-                    {
-                        name: '生产技术部',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [122]
-                    },
-                    {
-                        name: '消防保卫部',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [220]
-                    },
-                    {
-                        name: '选煤厂',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [255]
-                    },
-                    {
-                        name: '原料二车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [255]
-                    },
-                    {
-                        name: '原料一车间',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [255]
-                    },
-                    {
-                        name: '众和机电',
-                        type: 'bar',
-                        label: labelOption,
-                        emphasis: {
-                            focus: 'series'
-                        },
-                        data: [255]
-                    },
-                ]
+                series:this.columnChartData.dataList
+                // series: [
+                //     {
+                //         name: '安全环保部',
+                //         type: 'bar',
+                //         label: labelOption,
+                //         emphasis: {
+                //             focus: 'series'
+                //         },
+                //         data: [320]
+                //     }
+                // ]
             };
-                // 使用刚指定的配置项和数据显示图表。
+            // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option)
         }
     }

--
Gitblit v1.9.2