From 2f5d64825dbc81f9732893ee9f3de1a38725ae25 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 10 三月 2025 17:12:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/components/Echart/echart.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 116 insertions(+), 0 deletions(-)
diff --git a/src/components/Echart/echart.vue b/src/components/Echart/echart.vue
new file mode 100644
index 0000000..a7ccff3
--- /dev/null
+++ b/src/components/Echart/echart.vue
@@ -0,0 +1,116 @@
+<template>
+ <div>
+ <div class="echart_size" :id="id" :style="`height:${config.height};width:${config.width}`"></div>
+ </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import ResizeListener from 'element-resize-detector';
+import { iuCharts } from '@/utils/echarts'
+export default {
+ props: {
+ id: {
+ type: String,
+ default: ''
+ },
+ config: {
+ type: Object,
+ default: () => { }
+ },
+ datas: {
+ type: Object,
+ default: () => { }
+ }
+ },
+ data() {
+ return {
+ chart: null,
+ }
+ },
+ watch: {
+ /* 濡傛灉鍥捐〃鏁版嵁鏄悗鍙拌幏鍙栫殑锛岀洃鍚埗缁勪欢涓殑鏁版嵁鍙樺寲锛岄噸鏂拌Е鍙慐charts */
+ datas: {
+ deep: true,
+ // immediate: true,
+ handler(val) {
+ this.$nextTick(() => {
+ this.init();
+ })
+ },
+ },
+ },
+ created() {
+ this.$nextTick(() => {
+ this.init()
+ })
+ },
+ mounted() {
+ window.addEventListener('resize', this.windowResizeListener);
+ this.chartEleResizeListener();
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return;
+ }
+ this.chart.dispose();
+ this.chart = null;
+ },
+ methods: {
+ init() {
+ // 瀹炰緥鍖栧璞�
+ this.chart = echarts.init(document.getElementById(this.id))
+ this.chart.showLoading({
+ text: 'loading',
+ color: '#3A7BFA',
+ textColor: '#000',
+ maskColor: 'rgba(255, 255, 255, 0.2)',
+ zlevel: 0,
+ });
+ if (this.config.isLoading) {
+ this.chart.hideLoading();
+ switch (this.config.type) {
+ case 'bar':
+ iuCharts.drawBar(this.chart, this.datas)
+ break;
+ case 'line':
+ iuCharts.drawLine(this.chart, this.datas)
+ break;
+ case 'pie':
+ iuCharts.drawPie(this.chart, this.datas)
+ break;
+ case 'gauge':
+ iuCharts.drawGauge(this.chart, this.datas)
+ break;
+ default:
+ break;
+ }
+ setTimeout(() => {
+ this.chart.resize()
+ }, 200)
+ }
+ },
+ /* 瀵筩hart鍏冪礌灏哄杩涜鐩戝惉锛屽綋鍙戠敓鍙樺寲鏃跺悓姝ユ洿鏂癳chart瑙嗗浘 */
+ chartEleResizeListener() {
+ const chartInstance = ResizeListener({
+ strategy: 'scroll',
+ callOnAdd: true
+ });
+ chartInstance.listenTo(this.$el, () => {
+ if (!this.chart) return;
+ this.chart.resize();
+ });
+ },
+ /* 褰撶獥鍙ｇ缉鏀炬椂锛宔chart鍔ㄦ�佽皟鏁磋嚜韬ぇ灏� */
+ windowResizeListener() {
+ if (!this.chart) return;
+ this.chart.resize();
+ }
+ }
+}
+</script>
+<style scoped>
+.echart_size {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.9.3