zqq:echart调整
This commit is contained in:
qqGroup0
parent
d3c06b6f01
commit
e51960aa51
|
|
@ -1,35 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="home-container layout-pd">
|
<div class="home-container layout-pd">
|
||||||
<!-- 第一行 -->
|
<!-- 第一行 -->
|
||||||
<el-row :gutter="15" class="home-card-one mb15">
|
<el-row :gutter="15"
|
||||||
<el-col
|
class="home-card-one mb15">
|
||||||
:xs="24"
|
<el-col :xs="24"
|
||||||
:sm="12"
|
:sm="12"
|
||||||
:md="12"
|
:md="12"
|
||||||
:lg="6"
|
:lg="6"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
v-for="(v, k) in state.homeOne"
|
v-for="(v, k) in state.homeOne"
|
||||||
:key="k"
|
:key="k"
|
||||||
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
|
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
|
||||||
>
|
|
||||||
<div class="home-card-item flex">
|
<div class="home-card-item flex">
|
||||||
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
<div class="flex-margin flex w100"
|
||||||
|
:class="` home-one-animation${k}`">
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<span class="font30">{{ v.num1 }}</span>
|
<span class="font30">{{ v.num1 }}</span>
|
||||||
<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
|
<span class="ml5 font16"
|
||||||
|
:style="{ color: v.color1 }">{{ v.num2 }}%</span>
|
||||||
<div class="mt10">{{ v.num3 }}</div>
|
<div class="mt10">{{ v.num3 }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
<div class="home-card-item-icon flex"
|
||||||
<i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
|
:style="{ background: `var(${v.color2})` }">
|
||||||
|
<i class="flex-margin font32"
|
||||||
|
:class="v.num4"
|
||||||
|
:style="{ color: `var(${v.color3})` }"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- 第二行 -->
|
<!-- 第二行 -->
|
||||||
<el-row :gutter="15" class="home-card-two mb15">
|
<el-row :gutter="15"
|
||||||
|
class="home-card-two mb15">
|
||||||
<!-- 后台响应须知 -->
|
<!-- 后台响应须知 -->
|
||||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
|
<el-col :xs="24"
|
||||||
|
:sm="10"
|
||||||
|
:md="10"
|
||||||
|
:lg="8"
|
||||||
|
:xl="8">
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<div class="home-card-item-title">Notes on Background Response</div>
|
<div class="home-card-item-title">Notes on Background Response</div>
|
||||||
<div class="home-monitor">
|
<div class="home-monitor">
|
||||||
|
|
@ -46,30 +55,52 @@
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 全年用户申请量统计 -->
|
<!-- 全年用户申请量统计 -->
|
||||||
<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
|
<el-col :xs="24"
|
||||||
|
:sm="14"
|
||||||
|
:md="14"
|
||||||
|
:lg="16"
|
||||||
|
:xl="16">
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<div style="height: 100%" ref="homeBarRef"></div>
|
<div style="height: 100%"
|
||||||
|
ref="homeBarRef"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- 第三行 -->
|
<!-- 第三行 -->
|
||||||
<el-row :gutter="15" class="home-card-three">
|
<el-row :gutter="15"
|
||||||
|
class="home-card-three">
|
||||||
<!-- 灾害发生区域占比 饼图-->
|
<!-- 灾害发生区域占比 饼图-->
|
||||||
<el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
|
<el-col :xs="24"
|
||||||
|
:sm="10"
|
||||||
|
:md="10"
|
||||||
|
:lg="6"
|
||||||
|
:xl="6">
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<div style="height: 100%" ref="homePieRef"></div>
|
<div style="height: 100%"
|
||||||
|
ref="homePieRef"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 灾害响应月分布量变化 折线图 -->
|
<!-- 灾害响应月分布量变化 折线图 -->
|
||||||
<el-col :xs="24" :sm="14" :md="14" :lg="12" :xl="12" class="home-media">
|
<el-col :xs="24"
|
||||||
|
:sm="14"
|
||||||
|
:md="14"
|
||||||
|
:lg="12"
|
||||||
|
:xl="12"
|
||||||
|
class="home-media">
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<div style="height: 100%" ref="homeLineRef"></div>
|
<div style="height: 100%"
|
||||||
|
ref="homeLineRef"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 灾害类型占比 -->
|
<!-- 灾害类型占比 -->
|
||||||
<el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
|
<el-col :xs="24"
|
||||||
|
:sm="10"
|
||||||
|
:md="10"
|
||||||
|
:lg="6"
|
||||||
|
:xl="6">
|
||||||
<div class="home-card-item">
|
<div class="home-card-item">
|
||||||
<div style="height: 100%" ref="homePieRef2"></div>
|
<div style="height: 100%"
|
||||||
|
ref="homePieRef2"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
|
|
@ -98,6 +129,7 @@ const state = reactive({
|
||||||
homeChartOne: null,
|
homeChartOne: null,
|
||||||
homeChartTwo: null,
|
homeChartTwo: null,
|
||||||
homeCharThree: null,
|
homeCharThree: null,
|
||||||
|
homeChartFour: null,
|
||||||
dispose: [null, '', undefined],
|
dispose: [null, '', undefined],
|
||||||
},
|
},
|
||||||
homeOne: [
|
homeOne: [
|
||||||
|
|
@ -320,48 +352,48 @@ const initPieChart = () => {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
legend: {
|
// legend: {
|
||||||
type: 'scroll',
|
// type: 'scroll',
|
||||||
orient: 'vertical',
|
// orient: 'vertical',
|
||||||
right: '0%',
|
// right: '0%',
|
||||||
left: '65%',
|
// left: '65%',
|
||||||
top: 'center',
|
// top: 'center',
|
||||||
itemWidth: 14,
|
// itemWidth: 14,
|
||||||
itemHeight: 14,
|
// itemHeight: 14,
|
||||||
data: getname,
|
// data: getname,
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
rich: {
|
// rich: {
|
||||||
name: {
|
// name: {
|
||||||
fontSize: 14,
|
// fontSize: 14,
|
||||||
fontWeight: 400,
|
// fontWeight: 400,
|
||||||
width: 200,
|
// width: 200,
|
||||||
height: 35,
|
// height: 35,
|
||||||
padding: [0, 0, 0, 60],
|
// padding: [0, 0, 0, 60],
|
||||||
color: state.charts.color,
|
// color: state.charts.color,
|
||||||
},
|
// },
|
||||||
rate: {
|
// rate: {
|
||||||
fontSize: 15,
|
// fontSize: 15,
|
||||||
fontWeight: 500,
|
// fontWeight: 500,
|
||||||
height: 35,
|
// height: 35,
|
||||||
width: 40,
|
// width: 40,
|
||||||
padding: [0, 0, 0, 30],
|
// padding: [0, 0, 0, 30],
|
||||||
color: state.charts.color,
|
// color: state.charts.color,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
||||||
center: ['32%', '50%'],
|
center: ['50%', '50%'],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: function (params) {
|
color: function (params) {
|
||||||
return colorList[params.dataIndex];
|
return colorList[params.dataIndex];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
label: { show: false },
|
label: { show: true },
|
||||||
labelLine: { show: false },
|
labelLine: { show: true },
|
||||||
data: data,
|
data: data,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -371,8 +403,8 @@ const initPieChart = () => {
|
||||||
};
|
};
|
||||||
//homePieRef2 灾害类型占比 饼图
|
//homePieRef2 灾害类型占比 饼图
|
||||||
const initPieChart2 = () => {
|
const initPieChart2 = () => {
|
||||||
if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
|
if (!state.global.dispose.some((b) => b === state.global.homeChartFour)) state.global.homeChartFour.dispose();
|
||||||
state.global.homeChartTwo = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
|
state.global.homeChartFour = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
|
||||||
var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
|
||||||
var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
|
||||||
var data = [];
|
var data = [];
|
||||||
|
|
@ -383,7 +415,7 @@ const initPieChart2 = () => {
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: state.charts.bgColor,
|
backgroundColor: state.charts.bgColor,
|
||||||
title: {
|
title: {
|
||||||
text: 'Proportion of Disaster Occurred Areas',
|
text: 'Disaster Type Proportion',
|
||||||
x: 'left',
|
x: 'left',
|
||||||
textStyle: { fontSize: '15', color: state.charts.color },
|
textStyle: { fontSize: '15', color: state.charts.color },
|
||||||
},
|
},
|
||||||
|
|
@ -405,54 +437,54 @@ const initPieChart2 = () => {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
legend: {
|
// legend: {
|
||||||
type: 'scroll',
|
// type: 'scroll',
|
||||||
orient: 'vertical',
|
// orient: 'vertical',
|
||||||
right: '0%',
|
// right: '0%',
|
||||||
left: '65%',
|
// left: '65%',
|
||||||
top: 'center',
|
// top: 'center',
|
||||||
itemWidth: 14,
|
// itemWidth: 14,
|
||||||
itemHeight: 14,
|
// itemHeight: 14,
|
||||||
data: getname,
|
// data: getname,
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
rich: {
|
// rich: {
|
||||||
name: {
|
// name: {
|
||||||
fontSize: 14,
|
// fontSize: 14,
|
||||||
fontWeight: 400,
|
// fontWeight: 400,
|
||||||
width: 200,
|
// width: 200,
|
||||||
height: 35,
|
// height: 35,
|
||||||
padding: [0, 0, 0, 60],
|
// padding: [0, 0, 0, 60],
|
||||||
color: state.charts.color,
|
// color: state.charts.color,
|
||||||
},
|
// },
|
||||||
rate: {
|
// rate: {
|
||||||
fontSize: 15,
|
// fontSize: 15,
|
||||||
fontWeight: 500,
|
// fontWeight: 500,
|
||||||
height: 35,
|
// height: 35,
|
||||||
width: 40,
|
// width: 40,
|
||||||
padding: [0, 0, 0, 30],
|
// padding: [0, 0, 0, 30],
|
||||||
color: state.charts.color,
|
// color: state.charts.color,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
|
||||||
center: ['32%', '50%'],
|
center: ['50%', '50%'],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: function (params) {
|
color: function (params) {
|
||||||
return colorList[params.dataIndex];
|
return colorList[params.dataIndex];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
label: { show: false },
|
label: { show: true },
|
||||||
labelLine: { show: false },
|
labelLine: { show: true },
|
||||||
data: data,
|
data: data,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
state.global.homeChartTwo.setOption(option);
|
state.global.homeChartFour.setOption(option);
|
||||||
state.myCharts.push(state.global.homeChartTwo);
|
state.myCharts.push(state.global.homeChartFour);
|
||||||
};
|
};
|
||||||
// 柱状图
|
// 柱状图
|
||||||
const initBarChart = () => {
|
const initBarChart = () => {
|
||||||
|
|
@ -629,7 +661,7 @@ watch(
|
||||||
initPieChart();
|
initPieChart();
|
||||||
}, 700);
|
}, 700);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
initPieChart();
|
initPieChart2();
|
||||||
}, 700);
|
}, 700);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
initBarChart();
|
initBarChart();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue