绘制

src/views/dataChart/dataChartEdit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex chart heightFull widthFull">
-    <div class="chart-list heightFull overflow-y-auto mr-3">
+    <div v-if="showChart" class="chart-list heightFull overflow-y-auto mr-3">
       <div v-for="(chart, key) in Charts" :key="key" class="chart-type mb-3" @click="onChange(key)">
         <div>
           <span class="mdi" :class="chart.icon"></span>
@@ -12,28 +12,34 @@
     </div>
 
     <div class="chart-content d-flex heightFull">
-      <FullscreenToggle class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
+      <FullscreenToggle v-if="showChart" class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
         <template v-slot="{ toggle, isFullscreen }">
-          <div v-if="!empty" class="position-absolute" style="right: 10px; top: 80px; z-index: 999">
+          <div class="position-absolute d-flex flex-column" style="right: 10px; top: 80px; z-index: 999">
             <v-btn
-                icon
-                color="primary"
-                @click="toggle"
-              >
-                <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
-              </v-btn>
+              icon
+              color="primary"
+              @click="toggle"
+            >
+              <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
+            </v-btn>
+            <v-btn
+              icon
+              color="primary"
+              class="mt-3"
+              @click="onClose"
+            >
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
           </div>
-          <MEmpty v-if="empty"></MEmpty>
           <InitChart ref="chart" class="heightFull widthFull"></InitChart>
         </template>
       </FullscreenToggle>
-      <DataChartEditChat @render="onRender"></DataChartEditChat>
+      <DataChartEditChat :class="showChart ? 'widthHalf' : 'widthFull'" @render="onRender"></DataChartEditChat>
     </div>
   </div>
 </template>
 
 <script>
-import MEmpty from '@/components/Common/empty.vue'
 // 属性模块
 import * as Charts from './utils/options.js'
 import DataChartEditChat from './dataChartEditChat.vue'
@@ -46,11 +52,11 @@ export default {
   components: {
     DataChartEditChat,
     InitChart,
-    MEmpty,
     FullscreenToggle
   },
   data () {
     return {
+      showChart: false,
       Charts,
       chart: null,
       chartsOpt: {
@@ -62,24 +68,26 @@ export default {
       }
     }
   },
-  computed: {
-    empty () {
-      return !this.chartsOpt.config.xAxisData.length
-    }
-  },
-  mounted () {
-    this.chart = this.$refs.chart.init()
-  },
   methods: {
+    onClose () {
+      this.showChart = false
+      this.chart = null
+    },
     onChange (key) {
       this.chartsOpt.key = key
       this.setData()
     },
     onRender ({ type, data }) {
-      this.chartsOpt.config.xAxisData = type
-      this.chartsOpt.data = data
-      this.chartsOpt.key = this.chartsOpt.key || 'bar'
-      this.setData()
+      this.showChart = true
+      this.$nextTick(() => {
+        if (!this.chart) {
+          this.chart = this.$refs.chart.init()
+        }
+        this.chartsOpt.config.xAxisData = type
+        this.chartsOpt.data = data
+        this.chartsOpt.key = this.chartsOpt.key || 'bar'
+        this.setData()
+      })
     },
     setData () {
       const { data, key, config } = this.chartsOpt
@@ -125,6 +133,10 @@ export default {
 .widthFull {
   width: 100%;
 }
+
+.widthHalf {
+  width: 50%;
+}
 .chart {
   &-list {
     // width: 100px;

src/views/dataChart/dataChartEditChat.vue

@@ -67,14 +67,15 @@
                 <div class="mt-3" v-if="item.content.columns.length">
                   <div>
                     <v-menu
+                      v-model="item.showMenu"
                       :close-on-content-click="false"
+                      :close-on-click="false"
                       max-width="300"
                       attach=".chart-content-chat-box"
                     >
-                      <template v-slot:activator="{ on, attrs }">
+                      <template v-slot:activator>
                         <v-btn
-                          v-bind="attrs"
-                          v-on="on"
+                          @click="item.showMenu = true"
                           text
                           color="primary"
                         >我要画图</v-btn>
@@ -105,6 +106,7 @@
                             small-chips
                           ></v-autocomplete>
                           <div class="text-right">
+                            <v-btn small class="mr-3" @click="item.showMenu = false">关闭</v-btn>
                             <v-btn small color="primary" @click="onRender(item)">图表预览</v-btn>
                           </div>
                         </div>
@@ -175,7 +177,7 @@
         </div>
       </div>
     </div>
-    <div class="pa-3">
+    <div class="pa-3 chart-content-chat-btn">
       <div class="send d-flex align-center justify-center">
         <div class="send-box">
           <v-textarea
@@ -367,11 +369,19 @@ export default {
 }
 .chart-content {
   &-chat {
-    width: 50%;
     border: 1px solid #ccc;
     &-box {
       height: 0;
       flex: 1;
+      max-width: 800px;
+      width: 100%;
+      margin: 0 auto;
+    }
+    &-btn {
+      .send {
+        margin: 0 auto;
+        max-width: 800px;
+      }
     }
   }