隐患图表分析

13937891274

2022-05-23 ec9828923a7e907240a51fc463a4eabb029d6416

隐患图表分析

 package.json

@@ -45,6 +45,8 @@
    "ezuikit-js": "^0.2.3",
    "file-saver": "^1.3.8",
    "fuse.js": "3.4.2",
    "highcharts": "^10.1.0",
    "highcharts-vue": "^1.4.0",
    "jquery": "^3.6.0",
    "js-cookie": "2.2.0",
    "jsbarcode": "^3.11.4",

 src/main.js

@@ -33,6 +33,15 @@
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

//highcharts
import HighchartsVue from 'highcharts-vue'

//接下来，您可以将其注册为 Vue 对象中的插件：

Vue.use(HighchartsVue)



// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])

 src/views/chartAnalysis/index.vue

@@ -126,6 +126,16 @@
import {echarts} from "../../global";
import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis";

// 导入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() {
@@ -138,6 +148,7 @@
                superiorUnit: '新疆能源',
                inspectionCategory: '日常检查',
                policeSituation: '轻警',
                chart: null,
            },
            formData: {
                "echart_type": "column", //line:折线图；column：柱状图；pie :饼状图
@@ -162,7 +173,8 @@
        }
    },
    mounted() {
        this.getData()
        // this.getData()
        this.initEacharts3()
    },
    watch: {
        "chartType": function (newVal, oldVal) {
@@ -171,6 +183,76 @@
        }
    },
    methods: {
        // 饼图
        initEacharts3(){
            var n = 5000,
                data = this.getData(n);
            console.time("line");
            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}%'
                        }
                    }
                },
                exporting: {
                    enabled:false //去掉右上角
                },
                credits: {
                    enabled: false //不显示LOGO
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    data: [
                        ['安全环保部',   5.0],
                        ['电仪车间',       16.8],
                        {
                            name: '干熄焦',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        },
                        ['工程部',    8.5],
                        ['化产二车间',     6.2],
                        ['化产一车间',   0.7],
                        ['机电部',   0.7],
                        ['炼焦二车间',   3.7],
                        ['炼焦一车间',   4.8],
                        ['生产技术部',   4.2],
                        ['消防保卫部',   4.7],
                        ['选煤厂',   0.7],
                        ['原料二车间',   15.7],
                        ['原料一车间',   34.7],
                        ['众和机电',   0.7]
                    ]
                }]
            }
            Highcharts.chart("cylindrical",option);
            console.timeEnd("line");
        },
        getData() {
            chart_analysis(this.formData).then(res => {
                let data = res.data;
@@ -236,7 +318,7 @@
            })
        },
        initChart() {
            // 饼图
            // 柱形图
            var chartDom = document.getElementById('cylindrical');
            // var chartDom = document.getElementById('myChart');
            var myChart = echarts.init(chartDom);