sk_fems_ui commit

components/common/eChart/EChart.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="chart-wrap">
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import VChart from 'vue-echarts';
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		chartData: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+		isLegend: {
+			type: Boolean,
+		},
+	},
+	computed: {
+		...mapState({
+			isDarkMode: 'isDarkMode',
+		}),
+		chartOption() {
+			let chartOption = { ...this.option };
+			if (this.chartData) {
+				chartOption.xAxis.data = this.chartData.xAxis;
+				chartOption.series = this.chartData.series;
+				chartOption.toolbox = this.chartData.toolbox;
+				chartOption.dataZoom = this.chartData.dataZoom;
+				if (this.chartData.color) chartOption.color = this.chartData.color;
+			}
+			return chartOption;
+		},
+	},
+	data() {
+		return {
+			option: {
+				tooltip: {
+					trigger: 'axis',
+					confine: true,
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '4%',
+					top: '3%',
+					bottom: this.isLegend ? '30' : '0',
+					containLabel: true,
+				},
+				legend: this.isLegend
+					? {
+							top: 'bottom',
+							left: 'center',
+							textStyle: {
+								color: '#95A0A9',
+								fontSize: 10,
+							},
+					  }
+					: null,
+				yAxis: {
+					type: 'value',
+					axisLabel: {
+						color: '#767D83',
+						fontSize: 10,
+					},
+				},
+				xAxis: {
+					type: 'category',
+					axisLabel: {
+						color: '#767D83',
+						fontSize: 10,
+					},
+					data: [], //xAxis text
+				},
+				series: [
+					{
+						name: '',
+						type: 'bar',
+						showBackground: true,
+						data: [],
+					},
+				],
+			},
+		};
+	},
+	created() {
+		// this.
+	},
+};
+</script>

components/common/eChart/LineA.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="chartLine" :style="`height: ${VChartHeight}`">
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import VChart from 'vue-echarts';
+
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		VChartHeight: {
+			require: true,
+		},
+		chartOption: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+	},
+	data() {
+		return {
+			option: null,
+		};
+	},
+};
+</script>

components/common/eChart/LineB.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="chartLine" :style="`height: ${VChartHeight}`">
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import VChart from 'vue-echarts';
+
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		VChartHeight: {
+			require: true,
+		},
+		chartOption: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+	},
+	data() {
+		return {
+			option: null,
+		};
+	},
+};
+</script>

components/common/eChart/LineC.vue

@@ -0,0 +1,31 @@
+<template>
+	<div
+		class="chartLine"
+		:style="`height: ${VChartHeight ? VChartHeight : '100%'}`"
+	>
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import VChart from 'vue-echarts';
+
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		VChartHeight: {
+			require: true,
+		},
+		chartOption: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+	},
+	data() {
+		return {};
+	},
+};
+</script>

components/common/eChart/PieA.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="chartPie" :style="`height: ${VChartHeight}`">
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import VChart from 'vue-echarts';
+
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		VChartHeight: {
+			require: true,
+		},
+		chartOption: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+	},
+	data() {
+		return {
+			option: null,
+		};
+	},
+	created() {},
+};
+</script>

components/common/eChart/PieB.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="chartPie" :style="`height: ${VChartHeight}`">
+		<v-chart class="chart" :option="chartOption" autoresize />
+	</div>
+</template>
+
+<script>
+import VChart from 'vue-echarts';
+
+export default {
+	components: {
+		VChart,
+	},
+	props: {
+		VChartHeight: {
+			require: true,
+		},
+		chartOption: {
+			type: Object,
+			default: () => {},
+			require: true,
+		},
+	},
+	data() {
+		return {
+			option: null,
+		};
+	},
+};
+</script>