From f19e7a291f68f243a7b9ac16e0c1f794967d17ae Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Fri, 25 Mar 2022 16:27:34 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/pcviews/large/index.vue | 189 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 183 insertions(+), 6 deletions(-)
diff --git a/src/pcviews/large/index.vue b/src/pcviews/large/index.vue
index dd121de..36c58ab 100644
--- a/src/pcviews/large/index.vue
+++ b/src/pcviews/large/index.vue
@@ -20,8 +20,8 @@
</div>
<div class="right-container">
<div class="top" id="RightTop"></div>
- <div class="center"></div>
- <div class="bottom"></div>
+ <div class="center" id="RightCenter"></div>
+ <div class="bottom" id="RightBottom"></div>
</div>
</div>
</template>
@@ -43,7 +43,10 @@
this.$nextTick(() => {
this.initPillerOne()
this.initPillerTwo()
- this.ecartsInitCircle()
+ this.initCircle()
+ this.initPlineThree()
+ this.initGather()
+ this.initPlines()
})
},
methods: {
@@ -51,9 +54,24 @@
// 柱形图
// 因为初始化echarts 的时候，需要指定的容器 id='main'
this.$echarts.init(document.getElementById('LeftTop')).setOption({
+ title: {
+ text: '建筑物统计'
+ },
+ grid: {
+ // top: '2%',
+ left: '3%',
+ right: '3%',
+ bottom: '2%',
+ containLabel: true
+ },
xAxis: {
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ nameRotate: 45,
+ data: ['文教建筑', '医疗建筑', '体育建筑', '展览建筑', '商业建筑', '行政建筑', '观演建筑'],
+ axisLabel: {
+ color: '#5ce7ff',
+ rotate: 35
+ }
},
yAxis: {
type: 'value'
@@ -108,7 +126,7 @@
]
})
},
- ecartsInitCircle () {
+ initCircle () {
this.$echarts.init(document.getElementById('LeftCenter')).setOption({
title: {
text: 'Referer of a Website',
@@ -141,6 +159,166 @@
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
+ }
+ ]
+ })
+ },
+ initPlineThree () {
+ let base = new Date(1968, 9, 3)
+ const oneDay = 24 * 3600 * 1000
+ const date = []
+ const data = [Math.random() * 300]
+ for (let i = 1; i < 20000; i++) {
+ var now = new Date((base += oneDay))
+ date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
+ }
+ this.$echarts.init(document.getElementById('LeftBottom')).setOption({
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt) {
+ return [pt[0], '10%']
+ }
+ },
+ title: {
+ left: 'center',
+ text: 'Large Area Chart'
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: date
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 10
+ },
+ {
+ start: 0,
+ end: 10
+ }
+ ],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ symbol: 'none',
+ sampling: 'lttb',
+ itemStyle: {
+ color: 'rgb(255, 70, 131)'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }
+ ])
+ },
+ data: data
+ }
+ ]
+ })
+ },
+ initGather () {
+ this.$echarts.init(document.getElementById('RightCenter')).setOption({
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2015', '2016', '2017'],
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+ },
+ xAxis: { type: 'category' },
+ yAxis: {},
+ // Declare several bar series, each will be mapped
+ // to a column of dataset.source by default.
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+ })
+ },
+ initPlines () {
+ this.$echarts.init(document.getElementById('RightBottom')).setOption({
+ title: {
+ text: 'Stacked Line'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Email',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Union Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Direct',
+ type: 'line',
+ stack: 'Total',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Search Engine',
+ type: 'line',
+ stack: 'Total',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
})
@@ -251,7 +429,6 @@
}
.top {
- background: rgba(248, 248, 248, 0.75);
}
.center {
--
Gitblit v1.9.3