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