地图

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@antv/data-set": "^0.11.7",
     "@antv/f2": "^3.8.9",
+    "@vue/composition-api": "^1.0.0-rc.12",
     "axios": "^0.21.0",
     "echarts": "^5.1.2",
     "vant": "^2.11.2",

src/view/index/components/live/index.vue

@@ -80,6 +80,7 @@
     <div class="title">观众地域分布</div>
     <canvas
       id="audienceRegion"
+      ref="audienceRegion"
       class="canvas"
       :width="client.width"
       :height="client.height"
@@ -135,10 +136,11 @@
 import { getlive } from "@/api/getList.js";
 import filters from "@/utils/filters/index";
 import F2 from "@antv/f2/lib/index-all";
-import DataSet from "@antv/data-set";
+// import DataSet from "@antv/data-set";
 import mapJSON from "./mapJSON.js";
 import { Dialog } from "vant";
 import "vant/lib/dialog/style";
+import * as echarts from "echarts";
 export default {
   components: {},
   props: {
@@ -237,6 +239,12 @@ export default {
           const item = mapJSON.features[o];
           if (item.properties.name === element.key) {
             item.properties.value = element.count;
+            item.properties.name =
+              item.properties.name +
+              ":" +
+              ((element.rate * 100).toFixed(1) - 0) +
+              "%";
+            console.log((element.rate * 100).toFixed(1));
             break;
           }
         }
@@ -293,7 +301,7 @@ export default {
         sidePadding: 40,
         label1: function label1(data, color) {
           return {
-            text: data.name + ':' + filters.formatNum(data.percent) + "人",
+            text: data.name + ":" + filters.formatNum(data.percent) + "人",
             fill: color,
           };
         },
@@ -370,61 +378,107 @@ export default {
       chart.render();
     },
     map() {
-      const geoDv = new DataSet.View().source(mapJSON, {
-        type: "GeoJSON",
+      let myChart = echarts.init(this.$refs.audienceRegion);
+      window.onresize = myChart.resize;
+      echarts.registerMap("china", mapJSON);
+      let data = mapJSON.features.map(v => {
+        return {
+          name: v.properties.name,
+          value: v.properties.value,
+        };
       });
-      const chart = new F2.Chart({
-        id: "audienceRegion",
-        pixelRatio: window.devicePixelRatio,
+      data = data.sort((a, b) => {
+        return b.value - a.value;
       });
-      chart.legend(false);
-      chart.axis(false);
-      chart.tooltip({
-        custom: true,
-        showCrosshairs: false,
-        onChange: function onChange(ev) {
-          const items = ev.items;
-          items[0].name = items[0].title;
-          console.log(ev);
+      myChart.setOption({
+        tooltip: {
+          show: true,
+          triggerOn: "click",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
-      });
-      for (let i = 0; i < geoDv.rows.length; i++) {
-        const element = geoDv.rows[i];
-        element.value = element.properties.value;
-      }
-      chart.source(geoDv.rows);
-      console.log(geoDv.rows)
-      chart
-        .polygon()
-        .position("longitude*latitude")
-        .color("value", cValue => {
-          if (this.colors[cValue]) return this.colors[cValue];
-          let c = ["8", "9", "a", "b", "c", "d"];
-          let color = "#";
-          if (cValue == 0) {
-            color = "rgba(0,0,0,.1)";
-          } else
-            for (let i = 0; i < 6; i++) {
-              let len = Math.floor(Math.random() * c.length);
-              color += c[len];
-            }
-          this.colors[cValue] = color;
-          return color;
-        });
-      chart.render();
-      const canvas = chart.get("canvas");
-      const group = canvas.addGroup();
-      geoDv.rows.forEach(function(obj) {
-        group.addShape("text", {
-          attrs: {
-            x: obj.centroidX,
-            y: obj.centroidY,
-            text: obj.name,
-            textAlign: "center",
-            fill: "#000",
+        visualMap: {
+          show: false,
+          min: 0,
+          max: data[0].value,
+          inRange: {
+            color: ["rgba(0,0,0,.0)", "yellow"],
           },
-        });
+        },
+        series: [
+          {
+            type: "map",
+            mapType: "china",
+            geoIndex: 0,
+            zppm: 1.5,
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76acff", //每个区域的边框色
+                areaColor: "rgba(118,172,255, 0)", //区域背景色
+              },
+            },
+            data,
+          },
+        ],
       });
+
+      // const geoDv = new DataSet.View().source(mapJSON, {
+      //   type: "GeoJSON",
+      // });
+      // const chart = new F2.Chart({
+      //   id: "audienceRegion",
+      //   pixelRatio: window.devicePixelRatio,
+      // });
+      // chart.legend(false);
+      // chart.axis(false);
+      // chart.tooltip({
+      //   custom: true,
+      //   showCrosshairs: false,
+      //   onChange: function onChange(ev) {
+      //     const items = ev.items;
+      //     items[0].name = items[0].title;
+      //     console.log(ev);
+      //   },
+      // });
+      // for (let i = 0; i < geoDv.rows.length; i++) {
+      //   const element = geoDv.rows[i];
+      //   element.value = element.properties.value;
+      // }
+      // chart.source(geoDv.rows);
+      // console.log(geoDv.rows);
+      // chart
+      //   .polygon()
+      //   .position("longitude*latitude")
+      //   .color("value", cValue => {
+      //     if (this.colors[cValue]) return this.colors[cValue];
+      //     let c = ["8", "9", "a", "b", "c", "d"];
+      //     let color = "#";
+      //     if (cValue == 0) {
+      //       color = "rgba(0,0,0,.1)";
+      //     } else
+      //       for (let i = 0; i < 6; i++) {
+      //         let len = Math.floor(Math.random() * c.length);
+      //         color += c[len];
+      //       }
+      //     this.colors[cValue] = color;
+      //     return color;
+      //   });
+      // chart.render();
+      // const canvas = chart.get("canvas");
+      // const group = canvas.addGroup();
+      // geoDv.rows.forEach(function(obj) {
+      //   group.addShape("text", {
+      //     attrs: {
+      //       x: obj.centroidX,
+      //       y: obj.centroidY,
+      //       text: obj.name,
+      //       textAlign: "center",
+      //       fill: "#000",
+      //     },
+      //   });
+      // });
     },
     showDetail(key) {
       let val = "",

yarn.lock

@@ -1448,6 +1448,13 @@
   optionalDependencies:
     prettier "^1.18.2"
 
+"@vue/composition-api@^1.0.0-rc.12":
+  version "1.0.0-rc.12"
+  resolved "https://registry.nlark.com/@vue/composition-api/download/@vue/composition-api-1.0.0-rc.12.tgz#30a122ee74ba322310efd15f1b33ee5822f4bbdc"
+  integrity sha1-MKEi7nS6MiMQ79FfGzPuWCL0u9w=
+  dependencies:
+    tslib "^2.2.0"
+
 "@vue/eslint-config-prettier@^5.0.0":
   version "5.1.0"
   resolved "https://registry.npm.taobao.org/@vue/eslint-config-prettier/download/@vue/eslint-config-prettier-5.1.0.tgz#837241a26ed396976cb8dabd77939303245523cf"
@@ -8567,6 +8574,11 @@ tslib@^2.0.0, tslib@^2.0.3:
   resolved "https://registry.nlark.com/tslib/download/tslib-2.2.0.tgz?cache=0&sync_timestamp=1618846758811&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.2.0.tgz"
   integrity sha1-+yxHWXfjXiQTEe3iaTzuHsZpj1w=
 
+tslib@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4=
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz"