添加地图

miniapp/pages/yuecai/search/index1.vue

@@ -10,7 +10,10 @@
           placeholder-color="#65371b"></u-search>
       </view>
     </view>
-    <u-swiper height="185" :list="bannerList" @click="clickInfo" keyName="cover"></u-swiper>
+    <!-- <u-swiper height="185" :list="bannerList" @click="clickInfo" keyName="cover"></u-swiper> -->
+    <view style="width: 100%;height: 250px;">
+      <qiun-data-charts type="map" :opts="mapOpts" :chartData="mapDataColumn" @getIndex="clickMap" />
+    </view>
     <u-tabs ref="tabs" :list="tabList" :scrollable="false" :current="currentTab" @change="tabChange" lineColor="#65371b"
       :activeStyle="{color:'#65371b'}" inactiveStyle="{color:'#65371b'}"></u-tabs>
     <view class="info-list">
@@ -26,10 +29,71 @@
 
 <script>
   import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
+
+  import mapdata from '@/mockdata/mapdata.json';
   export default {
     mixins: [themeMixins],
     data() {
       return {
+        mapOpts: {
+          timing: "easeOut",
+          duration: 1000,
+          rotate: false,
+          rotateLock: false,
+          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+          padding: [0, 0, 0, 0],
+          fontSize: 13,
+          fontColor: "#666666",
+          dataLabel: false,
+          dataPointShape: true,
+          dataPointShapeType: "solid",
+          touchMoveLimit: 60,
+          enableScroll: false,
+          enableMarkLine: false,
+          extra: {
+            map: {
+              border: true,
+              borderWidth: 1,
+              borderColor: "#666666",
+              fillOpacity: 0.6,
+              activeBorderColor: "#F04864",
+              activeFillColor: "#FACC14",
+              activeFillOpacity: 1,
+              mercator: false,
+              active: true,
+              activeTextColor: "#FFFFFF"
+            },
+            tooltip: {
+              showBox: true,
+              showArrow: true,
+              showCategory: false,
+              borderWidth: 0,
+              borderRadius: 0,
+              borderColor: "#000000",
+              borderOpacity: 0.7,
+              bgColor: "#000000",
+              bgOpacity: 0.7,
+              gridType: "solid",
+              dashLength: 4,
+              gridColor: "#CCCCCC",
+              boxPadding: 3,
+              fontSize: 13,
+              lineHeight: 20,
+              fontColor: "#FFFFFF",
+              legendShow: true,
+              legendShape: "auto",
+              splitLine: true,
+              horizentalLine: false,
+              xAxisLabel: false,
+              yAxisLabel: false,
+              labelBgColor: "#FFFFFF",
+              labelBgOpacity: 0.7,
+              labelFontColor: "#666666"
+            }
+          }
+        },
+        mapDataColumn: {},
+        //
         chartOption: {
 
         },
@@ -49,11 +113,33 @@
         currentTab: 0
       }
     },
+    onReady() {
+
+      setTimeout(() => {
+        let md = {
+          visualMap: {
+            min: 800,
+            max: 50000,
+            text: ['High', 'Low'],
+            realtime: false,
+            calculable: true,
+            inRange: {
+              color: ['lightskyblue', 'yellow', 'orangered']
+            }
+          },
+          series: mapdata.features
+        };
+        this.mapDataColumn = JSON.parse(JSON.stringify(md));
+      }, 5000);
+    },
     onLoad(options) {},
     onShow() {
       this.getBanners()
     },
     methods: {
+      clickMap(e) {
+        debugger
+      },
       tabChange(index) {
         this.current = index;
       },
@@ -121,10 +207,10 @@
   .info-list {
     display: flex;
     flex-wrap: wrap;
+
     .info-item {
       padding: 20rpx;
       width: 33%;
-      
       box-sizing: border-box;
 
       .info-pic {