init

2022-05-12 18:12:20 +08:00
parent c31729ec7e
commit fe38e19924
284 changed files with 33456 additions and 11 deletions
@@ -0,0 +1,64 @@
+<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);
+	const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
+
+	export default {
+		...echarts,
+		name: "scEcharts",
+		props: {
+			height: { type: String, default: "100%" },
+			width: { type: String, default: "100%" },
+			nodata: {type: Boolean, default: false },
+			option: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				isActivat: false,
+				myChart: null
+			}
+		},
+		watch: {
+			option: {
+				deep:true,
+				handler (v) {
+					unwarp(this.myChart).setOption(v);
+				}
+			}
+		},
+		computed: {
+			myOptions: function() {
+				return this.option || {};
+			}
+		},
+		activated(){
+			if(!this.isActivat){
+				this.$nextTick(() => {
+					this.myChart.resize()
+				})
+			}
+		},
+		deactivated(){
+			this.isActivat = false;
+		},
+		mounted(){
+			this.isActivat = true;
+			this.$nextTick(() => {
+				this.draw();
+			})
+		},
+		methods: {
+			draw(){
+				var myChart = echarts.init(this.$refs.scEcharts, 'T');
+				myChart.setOption(this.myOptions);
+				this.myChart = myChart;
+				window.addEventListener('resize', () => myChart.resize());
+			}
+		}
+	}
+</script>