From ec9828923a7e907240a51fc463a4eabb029d6416 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期一, 23 五月 2022 15:41:09 +0800
Subject: [PATCH] 隐患图表分析
---
src/views/chartAnalysis/index.vue | 86 ++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 84 insertions(+), 2 deletions(-)
diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue
index 90cf4ec..d8186d3 100644
--- a/src/views/chartAnalysis/index.vue
+++ b/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);
--
Gitblit v1.9.2