From e378faea25d7d71b6244ee70133877ea5ba7ec91 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 12 七月 2023 13:17:15 +0800
Subject: [PATCH] 修改
---
src/components/Home/IndexEcharts.vue | 93 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 81 insertions(+), 12 deletions(-)
diff --git a/src/components/Home/IndexEcharts.vue b/src/components/Home/IndexEcharts.vue
index 4146c3c..c797a40 100644
--- a/src/components/Home/IndexEcharts.vue
+++ b/src/components/Home/IndexEcharts.vue
@@ -6,23 +6,63 @@
<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,0]
+ let orangeData = [0,0,0,0,0,0]
+ let yellowData = [0,0,0,0,0,0]
+ let blueData = [0,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(data[2] && data[2].length>0){
+ for(let i of data[2]){
+ orangeData[i.disasterType - 1] = i.count
+ }
+ }
+ if(data[3] && data[3].length>0){
+ for(let i of data[3]){
+ yellowData[i.disasterType - 1] = i.count
+ }
+ }
+ if(data[4] && data[4].length>0){
+ for(let i of data[4]){
+ blueData[i.disasterType - 1] = 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 +74,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 +90,61 @@
type: "radar",
data: [
{
- value: [10, 40, 20, 60, 10, 60],
+ value: red,
name: "红",
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'
+ },
+ areaStyle:{
+ color: '#f66d05',
+ opacity: 0.2
}
},
{
- value: [60, 20, 43, 73, 12, 80],
+ value: yellow,
name: "黄",
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