From 443c649303cc275f4ff07b3d2f5e589047f8054d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 29 Apr 2022 17:24:06 +0800
Subject: [PATCH] 内容更改
---
src/pcviews/large/index.vue | 102 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 83 insertions(+), 19 deletions(-)
diff --git a/src/pcviews/large/index.vue b/src/pcviews/large/index.vue
index 36c58ab..7c3b93e 100644
--- a/src/pcviews/large/index.vue
+++ b/src/pcviews/large/index.vue
@@ -14,14 +14,34 @@
</div>
</div>
<div class="left-container">
- <div class="top" id="LeftTop"></div>
- <div class="center" id="LeftCenter"></div>
- <div class="bottom" id="LeftBottom"></div>
+ <div class="top">
+ <div class="l-title">
+ <span class="text">建筑统计</span>
+ </div>
+ <div class="l-content" id="LeftTop"></div>
+ </div>
+ <div class="center">
+ <div class="l-title"></div>
+ <div class="l-content" id="LeftCenter"></div>
+ </div>
+ <div class="bottom">
+ <div class="l-title"></div>
+ <div class="l-content" id="LeftBottom"></div>
+ </div>
</div>
<div class="right-container">
- <div class="top" id="RightTop"></div>
- <div class="center" id="RightCenter"></div>
- <div class="bottom" id="RightBottom"></div>
+ <div class="top">
+ <div class="r-title"></div>
+ <div class="r-content" id="RightTop"></div>
+ </div>
+ <div class="center">
+ <div class="r-title"></div>
+ <div class="r-content" id="RightCenter"></div>
+ </div>
+ <div class="bottom">
+ <div class="r-title"></div>
+ <div class="r-content" id="RightBottom"></div>
+ </div>
</div>
</div>
</template>
@@ -54,11 +74,8 @@
// 柱形图
// 因为初始化echarts 的时候，需要指定的容器 id='main'
this.$echarts.init(document.getElementById('LeftTop')).setOption({
- title: {
- text: '建筑物统计'
- },
grid: {
- // top: '2%',
+ top: '4%',
left: '3%',
right: '3%',
bottom: '2%',
@@ -69,19 +86,39 @@
nameRotate: 45,
data: ['文教建筑', '医疗建筑', '体育建筑', '展览建筑', '商业建筑', '行政建筑', '观演建筑'],
axisLabel: {
- color: '#5ce7ff',
+ color: '#fff',
rotate: 35
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
}
},
yAxis: {
- type: 'value'
+ type: 'value',
+ axisLabel: {
+ color: '#fff'
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisTick: {
+ show: true
+ },
+ splitLine: {
+ show: false
+ }
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
- showBackground: true,
- backgroundStyle: {
- color: 'rgba(220, 220, 220, 0.8)'
+ itemStyle: {
+ color: '#38ACD7'
}
}]
})
@@ -404,7 +441,7 @@
position: absolute;
top: 130px;
left: 10px;
- width: 24%;
+ width: 20%;
height: calc(100% - 140px);
// transform: rotateY(10deg);
// transform-origin: left center;
@@ -414,7 +451,7 @@
position: absolute;
top: 130px;
right: 10px;
- width: 24%;
+ width: 20%;
height: calc(100% - 140px);
}
@@ -432,11 +469,38 @@
}
.center {
- background: rgba(248, 248, 248, 0.75);
}
.bottom {
- background: rgba(248, 248, 248, 0.75);
+ }
+
+ .l-title,
+ .r-title {
+ position: relative;
+ height: 40px;
+ background: url('/img/bg/echarts-title.png');
+ background-size: 100% 100%;
+ color: #fff;
+
+ .text {
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: auto;
+ bottom: 0;
+ margin: auto;
+ font-size: 18px;
+ line-height: 40px;
+ font-weight: 700;
+ font-style: italic;
+ letter-spacing: 2px;
+ }
+ }
+ .l-content,
+ .r-content {
+ height: calc(100% - 40px);
+ background: url('/img/bg/echarts-content.png');
+ background-size: 100% 100%;
}
}
}
--
Gitblit v1.9.3