From 4c3f7b48153537a94a3b6e8fd50e604f129e89ab Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Tue, 27 Apr 2021 23:18:07 +0800
Subject: [PATCH] up

---
 src/components/scEcharts/echarts-theme-T.js | 59 +++++++++++++++
 src/components/scEcharts/index.vue          | 37 ++++++++++
 src/views/home/components/C1.vue            | 80 +++++++++++++++++++--
 src/views/home/components/C3.vue            | 57 ++++++---------
 4 files changed, 193 insertions(+), 40 deletions(-)
 create mode 100644 src/components/scEcharts/echarts-theme-T.js
 create mode 100644 src/components/scEcharts/index.vue

diff --git a/src/components/scEcharts/echarts-theme-T.js b/src/components/scEcharts/echarts-theme-T.js
new file mode 100644
index 00000000..b5032db4
--- /dev/null
+++ b/src/components/scEcharts/echarts-theme-T.js
@@ -0,0 +1,59 @@
+const T = {
+	"color": [
+		"#409EFF",
+		"#36CE9E",
+		"#E6A23C",
+		"#626c91",
+		"#F56C6C",
+		"#909399"
+	],
+	'grid': {
+		'left': '3%',
+		'right': '3%',
+		'bottom': '3%',
+		'top': '40',
+		'containLabel': true
+	},
+	"categoryAxis": {
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "#999"
+			}
+		},
+		"axisTick": {
+			"show": false,
+			"lineStyle": {
+				"color": "#333"
+			}
+		},
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": [
+					"#eee"
+				]
+			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(255,255,255,0.01)",
+					"rgba(0,0,0,0.01)"
+				]
+			}
+		}
+	},
+	"valueAxis": {
+		"axisLine": {
+			"show": false,
+			"lineStyle": {
+				"color": "#999"
+			}
+		},
+
+	}
+}
+
+export default T
diff --git a/src/components/scEcharts/index.vue b/src/components/scEcharts/index.vue
new file mode 100644
index 00000000..b707b6bb
--- /dev/null
+++ b/src/components/scEcharts/index.vue
@@ -0,0 +1,37 @@
+<template>
+	<div ref="scEcharts" :style="{height:height, width:width}"></div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	import T from './echarts-theme-T.js';
+	echarts.registerTheme('T', T);
+
+	export default {
+		name: "scEcharts",
+		props: {
+			height: { type: String, default: "100%" },
+			width: { type: String, default: "100%" },
+			nodata: {type: Boolean, default: false },
+			option: { type: Object, default: () => {} }
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			myOptions: function() {
+				return this.option || {};
+			}
+		},
+		mounted(){
+			this.draw();
+		},
+		methods: {
+			draw(){
+				let myChart = echarts.init(this.$refs.scEcharts, 'T');
+				myChart.setOption(this.myOptions);
+				window.addEventListener('resize', () => myChart.resize() );
+			}
+		}
+	}
+</script>
diff --git a/src/views/home/components/C1.vue b/src/views/home/components/C1.vue
index 9ca22287..41c208b4 100644
--- a/src/views/home/components/C1.vue
+++ b/src/views/home/components/C1.vue
@@ -1,15 +1,85 @@
 <template>
-	<el-skeleton />
+	<div v-loading="loading">
+		<scEcharts height="300px" :option="option"></scEcharts>
+	</div>
 </template>
 
 <script>
+	import scEcharts from '@/components/scEcharts';
+
 	export default {
 		title:"模块1",
-		props: {
-			msg: String
+		components: {
+			scEcharts
 		},
-		mounted(){
-			console.log("加载C1");
+		data() {
+			return {
+				loading: true,
+				option: {}
+			}
+		},
+		created() {
+			var _this = this;
+			setTimeout(function() {
+				_this.loading = false
+			}, 500);
+
+			var option = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				legend: {
+					data: ['支出', '收入'],
+					right: 13,
+				},
+				xAxis: {
+					boundaryGap: false,
+					data: ['周一', '周二', '周三', '周四', '周五', '周六'],
+				},
+				yAxis: [{
+					type: 'value',
+					name: '价格',
+					"splitLine": {
+						"show": false
+					}
+				}],
+				series: [{
+						name: '支出',
+						type: 'line',
+						symbolSize: 6,
+						smooth: true,
+						lineStyle: {
+							normal: {
+								shadowColor: 'rgba(0,0,0,0.2)',
+								shadowBlur: 15,
+								shadowOffsetY: 20
+							}
+						},
+						'areaStyle': {
+							'opacity': 0.2
+						},
+						data: [35, 10, 36, 5, 5, 20],
+					},
+					{
+						name: '收入',
+						type: 'line',
+						symbolSize: 6,
+						smooth: true,
+						lineStyle: {
+							normal: {
+								shadowColor: 'rgba(0,0,0,0.2)',
+								shadowBlur: 15,
+								shadowOffsetY: 20
+							}
+						},
+						'areaStyle': {
+							'opacity': 0.2
+						},
+						data: [15, 15, -25, 20, 20, 8],
+					},
+				],
+			};
+			this.option = option;
 		}
 	}
 </script>
diff --git a/src/views/home/components/C3.vue b/src/views/home/components/C3.vue
index 2cd71da2..5b6a9231 100644
--- a/src/views/home/components/C3.vue
+++ b/src/views/home/components/C3.vue
@@ -1,41 +1,30 @@
 <template>
 	<div v-loading="loading">
-		<div style="height: 200px" ref="demo"></div>
+		<scEcharts height="220px" :option="option"></scEcharts>
 	</div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	import T from '@/utils/echarts-theme-T.js';
-	echarts.registerTheme('T', T);
+	import scEcharts from '@/components/scEcharts';
 
 	export default {
 		title:"模块3",
 		components: {
-			echarts
-		},
-		props: {
-			msg: String
+			scEcharts
 		},
 		data() {
 			return {
-				loading: true
+				loading: true,
+				option: {}
 			}
 		},
-		mounted(){
+		created() {
 			var _this = this;
 			setTimeout(function() {
 				_this.loading = false
 			}, 500);
 
-			const myChart = echarts.init(this.$refs.demo, 'T');
-			const option = {
-				grid: {
-					top: 50,
-					right: 20,
-					bottom: 30,
-					left: 30,
-				},
+			var option = {
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: {
@@ -43,33 +32,31 @@
 					}
 				},
 				legend: {
-					data: ['预购队列', '最新成交价'],
+					data: ['支出', '收入'],
 					right: 13,
 				},
 				xAxis: {
-					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+					data: ['周一', '周二', '周三', '周四', '周五'],
 				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '价格',
-					},
-				],
-				series: [
-					{
-						name: '预购队列',
-						barWidth: 16,
+				yAxis: [{
+					type: 'value',
+					name: '价格',
+				}, ],
+				series: [{
+						name: '支出',
+						barWidth: '20%',
 						type: 'bar',
-						data: [5, 20, 36, 10, 10, 20],
+						data: [5, 20, 36, 10, 10],
 					},
 					{
-						name: '最新成交价',
-						type: 'line',
-						data: [15, 20, 16, 20, 30, 8],
+						name: '收入',
+						type: 'bar',
+						barWidth: '20%',
+						data: [15, 20, 16, 20, 30],
 					},
 				],
 			};
-			myChart.setOption(option);
+			this.option = option;
 		}
 	}
 </script>