jiale
2022-05-24 9131e35d805b009be9033e6867572f7132ab7d92
隐患图标分析修改
已修改1个文件
308 ■■■■■ 文件已修改
src/views/chartAnalysis/index.vue 308 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/chartAnalysis/index.vue
@@ -273,12 +273,6 @@
                        beta: 0
                    }
                },
                title: {
                    text: '众泰煤焦化合隐患单位隐患比例分析',
                    style: {
                        fontWeight: "bold"
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
@@ -327,16 +321,17 @@
                        let xList = [];
                        let dataList = [];
                        if (data.data != null && data.data.length > 0) {
                            console.log("柱图",data)
                            data.data[0].forEach(n => {
                                xList.push(n.graph);
                                let singleData = {
                                    "name": n.graph,
                                    "type": 'bar',
                                    "label": "labelOption",
                                    "emphasis": {
                                        focus: 'series'
                                    },
                                    "data": [n.yAxes]
                                    // "type": 'bar',
                                    // "label": "labelOption",
                                    // "emphasis": {
                                    //     focus: 'series'
                                    // },
                                    "data": [parseInt(n.yAxes)]
                                }
                                dataList.push(singleData);
                            })
@@ -359,8 +354,8 @@
                                    obj = {
                                        name: n.catalogy,
                                        data: [],
                                        type: 'line',
                                        areaStyle: {}
                                        // type: 'line',
                                        // areaStyle: {}
                                    }
                                    dataList.push(obj)
                                }
@@ -370,7 +365,7 @@
                                dataList.forEach(n => {
                                    let searchData = singileData.find(v => v.catalogy == n.name);
                                    if (searchData != null) {
                                        n.data.push(searchData.counts)
                                        n.data.push(parseInt(searchData.counts))
                                    } else {
                                        n.data.push(0)
                                    }
@@ -438,204 +433,119 @@
            // 折线图
            var chartDom = document.getElementById('line');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);
            // 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)
            var option = {
                chart:{
                    type:'area'
                },
                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']
                    text: '众泰煤焦化各隐患单位隐患走势分析'
                },
                yAxis: {
                    type: 'value'
                    title:{
                        enabled:false
                    }
                },
                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: {}
                //     }
                // ]
                colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                legend: {
                    align: "center", //程度标的目标地位
                    verticalAlign: "bottom",//垂直标的目标地位
                    x: 0, //间隔x轴的间隔
                    y: 0 //间隔Y轴的间隔
                },
                xAxis: {
                    // type: 'category',
                    // boundaryGap: false,
                    categories: this.lineChartData.timeList,
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                series: this.lineChartData.dataList,
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            Highcharts.chart("line", option);
        },
        initCloumnChart() {
            // 柱形图
            var chartDom = document.getElementById('column');
            var myChart = echarts.init(chartDom);
            var option;
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
            var option = {
                chart:{
                    type:'column'
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                title: {
                    text: null
                },
                yAxis: {
                    title:{
                        enabled:false
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    myChart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };
            const labelOption = {
                show: false,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            console.log(this.columnChartData)
            this.columnChartData.dataList.forEach(n => {
                n.label = labelOption;
            })
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
                legend: {
                    bottom: 0,
                    data: this.columnChartData.xList
                    // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电']
                    align: "center", //程度标的目标地位
                    verticalAlign: "bottom",//垂直标的目标地位
                    x: 0, //间隔x轴的间隔
                    y: 0 //间隔Y轴的间隔
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    containLabel: true
                xAxis: {
                    // type: 'category',
                    // boundaryGap: false,
                    categories: this.columnChartData.xList,
                    max:this.columnChartData.xList.length-1
                    // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11']
                },
                // toolbox: {
                //     show: true,
                //     orient: 'vertical',
                //     left: 'right',
                //     top: 'center',
                //     feature: {
                //         mark: { show: true },
                //         dataView: { show: true, readOnly: false },
                //         magicType: { show: true, type: ['line', 'bar', 'stack'] },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: this.columnChartData.xList
                        // data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: this.columnChartData.dataList
                // series: [
                //     {
                //         name: '安全环保部',
                //         type: 'bar',
                //         label: labelOption,
                //         emphasis: {
                //             focus: 'series'
                //         },
                //         data: [320]
                //     }
                // ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
                series: this.columnChartData.dataList,
                exporting: {
                    enabled: false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
            }
            Highcharts.chart("column", option);
        },
        getCurrentMonthFirst() {
            var date = new Date();