From 2a8099cf8cd907c6e14a9ac4300a05544c345b0d Mon Sep 17 00:00:00 2001
From: jiale <631455805@qq.com>
Date: 星期二, 24 五月 2022 15:51:03 +0800
Subject: [PATCH] 隐患图标分析修改
---
src/views/chartAnalysis/index.vue | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 104 insertions(+), 15 deletions(-)
diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue
index d9d884c..e69c6d1 100644
--- a/src/views/chartAnalysis/index.vue
+++ b/src/views/chartAnalysis/index.vue
@@ -92,10 +92,18 @@
</div>
</el-form>
</div>
- <div class="whole_bottom">
- <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 class="whole_bottom" style="position: relative;z-index: 1">
+ <div id="heigcharts" 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: 550px;"></div>-->
+ <div v-if="chartType == 'column'" class="legend">
+ <div class="legend-body">
+
+ <div v-for="(item,index) in this.columnChartData.xList" class="legend-item">
+ <div :class="'legendItemBack'+index"></div>{{item}}
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -167,6 +175,7 @@
YHBMList: [],
YHJBList: [],
YHZTList: [],
+ columnXData:[]
}
},
mounted() {
@@ -299,7 +308,7 @@
data: this.pieChartData
}]
}
- Highcharts.chart("pie", option);
+ Highcharts.chart("heigcharts", option);
},
getData() {
this.formData.beginTime = this.time[0]
@@ -333,11 +342,17 @@
// },
"data": [parseInt(n.yAxes)]
}
- dataList.push(singleData);
+ dataList.push(parseInt(n.yAxes));
})
}
this.columnChartData.xList = xList;
- this.columnChartData.dataList = dataList;
+ this.columnChartData.dataList=[]
+ this.columnChartData.dataList.push(
+ {
+ data:dataList,
+ colorByPoint:true
+ }
+ );
this.initCloumnChart()
} else if (this.formData.echart_type == "line") {
this.lineChartData = {}
@@ -507,13 +522,16 @@
enabled: false //不显示LOGO
},
}
- Highcharts.chart("line", option);
+ Highcharts.chart("heigcharts", option);
},
initCloumnChart() {
+ console.log("this.columnChartData.xList",this.columnChartData.xList)
+ console.log("this.columnChartData.dataList",this.columnChartData.dataList)
var option = {
chart:{
- type:'column'
+ type:'column',
+ marginBottom:70
},
title: {
text: null
@@ -523,12 +541,14 @@
enabled:false
}
},
- colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'],
+ tooltip:{
+ formatter:function () {
+ return this.x+" : "+this.y
+ }
+ },
+ colors: ['#ff6600', '#fcd202', '#b0de09', '#0289cc', '#2001cd', '#cd0d74', '#cc0000', '#00cc00', '#0000cc', '#dddddd', '#999999', '#333333', '#990000', '#92e3d4', '#f09aea'],
legend: {
- align: "center", //程度标的目标地位
- verticalAlign: "bottom",//垂直标的目标地位
- x: 0, //间隔x轴的间隔
- y: 0 //间隔Y轴的间隔
+ enabled:false,
},
xAxis: {
// type: 'category',
@@ -545,7 +565,7 @@
enabled: false //不显示LOGO
},
}
- Highcharts.chart("column", option);
+ Highcharts.chart("heigcharts", option);
},
getCurrentMonthFirst() {
var date = new Date();
@@ -585,6 +605,75 @@
</script>
<style scoped>
+.legend{
+ position: absolute;bottom: 10px;z-index: 2;
+ width: 100%;
+}
+.legend-body{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ font-size: 12px;
+ height: 100%;
+}
+.legend-item{
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-left: 20px;
+ line-height: 1.5;
+}
+.legend-item div{
+ width: 20px;
+ height: 15px;
+ margin-right: 10px;
+}
+.legendItemBack0{
+ background-color: #ff6600;
+}
+.legendItemBack1{
+ background-color: #fcd202;
+}
+.legendItemBack2{
+ background-color: #b0de09;
+}
+.legendItemBack3{
+ background-color: #0289cc;
+}
+.legendItemBack4{
+ background-color: #2001cd;
+}
+.legendItemBack5{
+ background-color: #cd0d74;
+}
+.legendItemBack6{
+ background-color: #cc0000;
+}
+.legendItemBack7{
+ background-color: #00cc00;
+}
+.legendItemBack8{
+ background-color: #0000cc;
+}
+.legendItemBack9{
+ background-color: #dddddd;
+}
+.legendItemBack10{
+ background-color: #999999;
+}
+.legendItemBack11{
+ background-color: #333333;
+}
+.legendItemBack12{
+ background-color: #990000;
+}
+.legendItemBack13{
+ background-color: #92e3d4;
+}
+.legendItemBack14{
+ background-color: #f09aea;
+}
.top {
padding: 10px 5px;
background: #e4edf4;
--
Gitblit v1.9.2