项目初始化

datax-ui/src/components/PivotTable/index.vue

@@ -519,16 +519,11 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
   border: none;
-  thead th {
-    background-color: #CCE8EB;
+  thead {
+    background-color: rgba(255, 255, 255, 0.1);
   }
   tbody {
-    tr:nth-child(odd) {
-      background: #fff;
-    }
-    tr:nth-child(even) {
-      background: #F5FAFA;
-    }
+    background-color: rgba(255, 255, 255, 0.1);
   }
   td, th {
     border: 1px solid #ccc;
@@ -548,7 +543,7 @@ table {
       min-height: 36px;
       cursor: default;
       &.col-corner-bg {
-        background: #f1f7fd;
+        background-color: rgba(255, 255, 255, 0.1);
       }
     }
   }

datax-ui/src/utils/visual-chart.js

@@ -99,13 +99,13 @@ export const chartTypes = [
     }
   },
   {
-    name: '地图', value: 'geo', icon: 'chart_geo',
+    name: '地图', value: 'map', icon: 'chart_geo',
     status: true,
-    component: 'ChartGeo',
+    component: 'ChartMap',
     rule: {
-      text: '1个或多个 行维;0个或多个 列维;1个或多个 指标',
+      text: '1 行维;0 列维;1 指标',
       check(rows, columns, measures) {
-        return rows.length >= 1 && columns.length >= 0 && measures.length >= 1
+        return rows.length === 1 && columns.length === 0 && measures.length === 1
       }
     }
   },
@@ -153,39 +153,6 @@ export const chartTypes = [
       }
     }
   }
-  // {
-  //   name: '树图', value: 'tree', icon: 'chart_tree',
-  //   status: false,
-  //   component: 'ChartTree',
-  //   rule: {
-  //     text: '0 行维;0 列维;0 指标',
-  //     check(rows, columns, measures) {
-  //       return rows.length === 0 && columns.length === 0 && measures.length === 0
-  //     }
-  //   }
-  // },
-  // {
-  //   name: '旭日图', value: 'sunburst', icon: 'chart_sunburst',
-  //   status: false,
-  //   component: 'ChartSunburst',
-  //   rule: {
-  //     text: '0 行维;0 列维;0 指标',
-  //     check(rows, columns, measures) {
-  //       return rows.length === 0 && columns.length === 0 && measures.length === 0
-  //     }
-  //   }
-  // },
-  // {
-  //   name: '极区图', value: 'polar', icon: 'chart_polar',
-  //   status: false,
-  //   component: 'ChartPolar',
-  //   rule: {
-  //     text: '0 行维;0 列维;0 指标',
-  //     check(rows, columns, measures) {
-  //       return rows.length === 0 && columns.length === 0 && measures.length === 0
-  //     }
-  //   }
-  // }
 ]
 
 export const chartOptions = {
@@ -277,6 +244,10 @@ export const chartSeriesTypes = {
     { name: '菱形', value: 'diamond' },
     { name: '大头针形', value: 'pin' },
     { name: '箭头形', value: 'arrow' }
+  ],
+  'map': [
+    { name: '基础地图', value: 'map' },
+    { name: '视觉映射', value: 'visualMap' }
   ]
 }
 

datax-ui/src/views/visual/databoard/DataBoardBuild.vue

@@ -53,10 +53,11 @@
             :w="item.w"
             :h="item.h"
             :i="item.i"
+            drag-allow-from=".vue-draggable-handle"
             @resized="handleResize"
           >
             <el-card v-loading="getChartItem(item.i).loading" class="widget-center-card" body-style="padding: 10px;">
-              <div slot="header" class="widget-center-card-header">
+              <div slot="header" class="widget-center-card-header vue-draggable-handle">
                 <div>
                   <span>{{ getChartItem(item.i).chartName }}</span>
                 </div>

datax-ui/src/views/visual/datachart/components/ChartPanel.vue

@@ -28,7 +28,7 @@ import ChartTreemap from './widgets/ChartTreemap'
 import ChartWordCloud from './widgets/ChartWordCloud'
 import ChartLiquidFill from './widgets/ChartLiquidFill'
 import ChartSankey from './widgets/ChartSankey'
-import ChartGeo from './widgets/ChartGeo'
+import ChartMap from './widgets/ChartMap'
 import ChartTree from './widgets/ChartTree'
 import ChartSunburst from './widgets/ChartSunburst'
 import ChartPolar from './widgets/ChartPolar'
@@ -39,7 +39,7 @@ export default {
     ChartTable, ChartLine, ChartBar, ChartPie,
     ChartKpi, ChartRadar, ChartFunnel, ChartScatter,
     ChartGauge, ChartTreemap, ChartWordCloud, ChartLiquidFill,
-    ChartSankey, ChartGeo, ChartTree, ChartSunburst, ChartPolar
+    ChartSankey, ChartMap, ChartTree, ChartSunburst, ChartPolar
   },
   props: {
     chartSchema: {

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

@@ -68,6 +68,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         xAxis: { type: 'category' },
         yAxis: { type: 'value' },
         tooltip: { trigger: 'axis' }

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

@@ -68,6 +68,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {

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

@@ -62,6 +62,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {

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

-<template>
-  <div ref="chart" :style="chartStyle">ChartGeo</div>
-</template>
-
-<script>
-export default {
-  name: 'ChartGeo',
-  props: {
-    data: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    rows: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    values: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    chartType: {
-      type: String,
-      required: true
-    },
-    chartTheme: {
-      type: String,
-      require: true
-    },
-    chartOption: {
-      type: Object,
-      require: false,
-      default: () => ({})
-    },
-    chartStyle: {
-      type: Object,
-      require: false,
-      default: () => {
-        return {
-          height: '200px'
-        }
-      }
-    }
-  },
-  created() {
-    console.log(this.data)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -68,6 +68,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         xAxis: { type: 'category' },
         yAxis: { type: 'value' },
         tooltip: { trigger: 'axis' }

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

@@ -69,6 +69,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {

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

@@ -68,6 +68,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {

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

@@ -68,6 +68,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         radar: { indicator: [] },
         tooltip: { trigger: 'item' }
       },

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

@@ -63,6 +63,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {

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

@@ -63,6 +63,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         xAxis: {},
         yAxis: {},
         tooltip: { trigger: 'item' }

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

@@ -63,6 +63,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: {
           trigger: 'item',
           formatter: '{b} : {c}'

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

@@ -64,6 +64,7 @@ export default {
       connector: '-',
       chart: null,
       calcOption: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
         tooltip: { trigger: 'item' }
       },
       calcData: {