From 1ee4a5341215f94128b66cee4893c7c937df509a Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 08 七月 2024 09:05:20 +0800
Subject: [PATCH] bug修改
---
src/components/Home/IndexEcharts.vue | 149 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 119 insertions(+), 30 deletions(-)
diff --git a/src/components/Home/IndexEcharts.vue b/src/components/Home/IndexEcharts.vue
index 6a1114a..2f34e04 100644
--- a/src/components/Home/IndexEcharts.vue
+++ b/src/components/Home/IndexEcharts.vue
@@ -6,23 +6,83 @@
<script>
import * as echarts from 'echarts'
+import {getBasicData, getWarningData} from "@/api/login";
export default {
name: "index-echarts",
data() {
return {};
},
mounted() {
- this.initEchart();
+ this.getData()
},
methods: {
- initEchart() {
+ async getData(){
+ const t = this
+ const res = await getWarningData()
+ if(res.data.code == 100){
+ let data = res.data.data
+ let redData = [0,0,0,0,0]
+ let orangeData = [0,0,0,0,0]
+ let yellowData = [0,0,0,0,0]
+ let blueData = [0,0,0,0,0]
+ if(data[1] && data[1].length>0){
+ for(let i of data[1]){
+ // redData[i.disasterType - 1] = i.count
+ if(i.disasterType == 1){redData[0] = i.count}
+ if(i.disasterType == 3){redData[1] = i.count}
+ if(i.disasterType == 4){redData[2] = i.count}
+ if(i.disasterType == 5){redData[3] = i.count}
+ if(i.disasterType == 6){redData[4] = i.count}
+ }
+ }
+ if(data[2] && data[2].length>0){
+ for(let i of data[2]){
+ // orangeData[i.disasterType - 1] = i.count
+ if(i.disasterType == 1){orangeData[0] = i.count}
+ if(i.disasterType == 3){orangeData[1] = i.count}
+ if(i.disasterType == 4){orangeData[2] = i.count}
+ if(i.disasterType == 5){orangeData[3] = i.count}
+ if(i.disasterType == 6){orangeData[4] = i.count}
+ }
+ }
+ if(data[3] && data[3].length>0){
+ for(let i of data[3]){
+ // yellowData[i.disasterType - 1] = i.count
+ if(i.disasterType == 1){yellowData[0] = i.count}
+ if(i.disasterType == 3){yellowData[1] = i.count}
+ if(i.disasterType == 4){yellowData[2] = i.count}
+ if(i.disasterType == 5){yellowData[3] = i.count}
+ if(i.disasterType == 6){yellowData[4] = i.count}
+ }
+ }
+ if(data[4] && data[4].length>0){
+ for(let i of data[4]){
+ // blueData[i.disasterType - 1] = i.count
+ if(i.disasterType == 1){blueData[0] = i.count}
+ if(i.disasterType == 3){blueData[1] = i.count}
+ if(i.disasterType == 4){blueData[2] = i.count}
+ if(i.disasterType == 5){blueData[3] = i.count}
+ if(i.disasterType == 6){blueData[4] = i.count}
+ }
+ }
+ let whole = redData.concat(orangeData,yellowData,blueData)
+ let maxNum = Math.max(...whole)
+ t.initEchart(redData,orangeData,yellowData,blueData,maxNum);
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+ initEchart(red,orange,yellow,blue,maxNum) {
let chartDom = document.getElementById("echartsMain");
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
- data: ["红", "橙", "黄"],
- bottom: '10',
+ data: ["红", "橙", "黄", "蓝"],
+ bottom: 0,
icon: 'circle'
+ },
+ grid:{
+ bottom: "50%"
},
tooltip: {
show: true,
@@ -34,12 +94,15 @@
},
radar: {
shape: 'circle',
+ center: ['50%','46%'],
+ nameGap: 10,
indicator: [
- { name: "地震", max: 80 },
- { name: "森林草原火灾", max: 80 },
- { name: "水旱", max: 80 },
- { name: "地质", max: 80 },
- { name: "气象", max: 80 }
+ { name: "地震", max: maxNum },
+ // { name: "洪涝", max: maxNum },
+ { name: "气象", max: maxNum },
+ { name: "地质灾害", max: maxNum },
+ { name: "水旱", max: maxNum },
+ { name: "森林草原火灾", max: maxNum }
],
},
series: [
@@ -47,35 +110,61 @@
type: "radar",
data: [
{
- value: [10, 40, 20, 60, 10, 60],
+ value: red,
name: "红",
- lineStyle:{
- color:'red'
- },
- itemStyle: {
- color:'red'
- }
+ lineStyle:{
+ color:'red'
+ },
+ itemStyle: {
+ color:'red'
+ },
+ areaStyle:{
+ color: 'red',
+ opacity: 0.2
+ }
},
{
- value: [50, 14, 28, 26, 42, 21],
+ value: orange,
name: "橙",
- lineStyle:{
- color:'#f66d05'
- },
- itemStyle: {
- color:'#f66d05'
- }
+ lineStyle:{
+ color:'#f66d05'
+ },
+ itemStyle: {
+ color:'#f66d05'
+ },
+ areaStyle:{
+ color: '#f66d05',
+ opacity: 0.2
+ }
},
{
- value: [60, 20, 43, 73, 12, 80],
+ value: yellow,
name: "黄",
- lineStyle:{
- color:'#f7ad00'
- },
- itemStyle: {
- color:'#f7ad00'
- }
+ lineStyle:{
+ color:'#f7ad00'
+ },
+ itemStyle: {
+ color:'#f7ad00'
+ },
+ areaStyle:{
+ color: '#f7ad00',
+ opacity: 0.2
+ }
},
+ {
+ value: blue,
+ name: "蓝",
+ lineStyle:{
+ color:'#1890ff'
+ },
+ itemStyle: {
+ color:'#1890ff'
+ },
+ areaStyle:{
+ color: '#1890ff',
+ opacity: 0.2
+ }
+ }
],
},
],
--
Gitblit v1.9.2