1

src/packages/bi/src/commonComponents/chart-base.vue

@@ -7,7 +7,9 @@
  * @Date: 2020-07-16 18:27:04
 -->
 <template>
-  <div class="ebox" :id="uuid"></div>
+  <div class="ebox" :id="uuid">
+    <slot class="table" name="map" />
+  </div>
 </template>
 
 <script>

src/packages/bi/src/commonComponents/chart.vue

@@ -16,7 +16,42 @@
       :autoresize="true"
       :key="`${type}-${JSON.stringify(data)}`"
       :type="type"
-    />
+    >
+      <template v-if="type == 13" #map>
+        <div class="ui-table-head">
+          <table class="ui-table" style="border-bottom:none;">
+            <colgroup>
+              <col style="width:10%" />
+              <col style="width:10%" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th style="border-bottom:none;">省份</th>
+                <th style="border-bottom:none;">有效点击量</th>
+              </tr>
+            </thead>
+          </table>
+          <div class="ui-table-body">
+            <table class="ui-table">
+              <colgroup>
+                <col style="width:10%" />
+                <col style="width:10%" />
+              </colgroup>
+              <tbody>
+                <tr v-for="(item, index) in table" :key="index">
+                  <td>
+                    {{ item.name }}
+                  </td>
+                  <td>
+                    {{ item.value }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </template>
+    </v-chart>
     <BiBlank height="40" :usePrint="true"></BiBlank>
   </div>
 </template>
@@ -69,6 +104,16 @@ export default {
   },
   data() {
     return {
+      table: [
+        {
+          name: '河北',
+          value: '1000'
+        },
+        {
+          name: '重庆',
+          value: '876'
+        }
+      ],
       option: {}
     };
   },
@@ -153,3 +198,40 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.ui-table-head {
+  position: absolute;
+  left: 900px;
+  width: 227px;
+  height: 32px;
+  background: #f5f7fa;
+  opacity: 1;
+  border-radius: 6px 6px 0px 0px;
+}
+.ui-table {
+  width: 100%;
+  table-layout: fixed;
+}
+table {
+  border-collapse: collapse;
+}
+
+table,
+td,
+th {
+  border: 1px solid black;
+}
+th {
+  font-size: 12px;
+  height: 32px;
+  text-align: center;
+  position: sticky;
+}
+td {
+  padding: 6px 4px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>