项目初始化

datax-ui/src/views/visual/datachart/chart.vue

@@ -46,7 +46,7 @@
           <div class="widget-center-draggable-text">
             <draggable group="dimensions" :list="widget.rows" class="widget-center-draggable-line">
               <el-tag v-for="(item, index) in widget.rows" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
-                {{ item.alias ? item.alias : item.col }}
+                {{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
               </el-tag>
             </draggable>
           </div>
@@ -54,7 +54,7 @@
           <div class="widget-center-draggable-text">
             <draggable group="dimensions" :list="widget.columns" class="widget-center-draggable-line">
               <el-tag v-for="(item, index) in widget.columns" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
-                {{ item.alias ? item.alias : item.col }}
+                {{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
               </el-tag>
             </draggable>
           </div>
@@ -308,9 +308,6 @@ export default {
           position: relative;
           float: left;
           left: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
           margin: 5px;
           color: #333;
           border: 1px solid #F4F6FC;
@@ -322,6 +319,9 @@ export default {
             display: block;
             cursor: move;
             text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
       }

datax-ui/src/views/visual/datachart/components/widgets/ChartLine.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import echarts from 'echarts'
+
 export default {
   name: 'ChartLine',
   props: {
@@ -30,8 +32,54 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.renderChart()
+    this.$on('resized', this.handleResize)
+    window.addEventListener('resize', this.handleResize)
+  },
   created() {
     console.log(this.data)
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    renderChart() {
+      if (!this.$refs.chart) return
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: 'line'
+        }]
+      }
+      setTimeout(() => {
+        if (!this.chart) {
+          this.chart = echarts.init(this.$refs.chart)
+        }
+        this.chart.clear()
+        this.chart.setOption(option)
+      }, 0)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
   }
 }
 </script>