提交

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

@@ -78,13 +78,19 @@
       :height="client.height"
     ></canvas>
     <div class="title">观众地域分布</div>
-    <canvas
+    <div
+      id="audienceRegion"
+      ref="audienceRegion"
+      class="canvas"
+      :style="{width: client.width + 'px', height: client.height + 'px'}"
+    ></div>
+    <!-- <canvas
       id="audienceRegion"
       ref="audienceRegion"
       class="canvas"
       :width="client.width"
       :height="client.height"
-    ></canvas>
+    ></canvas> -->
     <div v-if="RealTimeTraffic.peopleList.length" class="title">实时流量</div>
     <canvas
       v-if="RealTimeTraffic.peopleList.length"
@@ -238,13 +244,7 @@ export default {
         for (let o = 0; o < mapJSON.features.length; o++) {
           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));
+            item.properties.value = ((element.rate * 100).toFixed(1) - 0);
             break;
           }
         }
@@ -394,7 +394,7 @@ export default {
         tooltip: {
           show: true,
           triggerOn: "click",
-          formatter: "{a} <br/>{b} : {c} ({d}%)",
+          formatter: "{c}%",
         },
         visualMap: {
           show: false,
@@ -409,7 +409,7 @@ export default {
             type: "map",
             mapType: "china",
             geoIndex: 0,
-            zppm: 1.5,
+            zoom: 1.25,
             label: {
               show: false,
             },
@@ -423,62 +423,6 @@ export default {
           },
         ],
       });
-
-      // 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 = "",

src/view/index/index.vue

@@ -426,7 +426,7 @@ export default {
   },
   created() {
     this.baseData = JSON.parse(this.$route.query.data || "{}");
-    let title = this.$route.query.title.split(" / ") || [];
+    let title = (this.$route.query.title || "").split(" / ") || [];
     this.baseData.topic_name && this.initData();
     !this.baseData.topic_name &&
       getBase({
@@ -645,7 +645,6 @@ export default {
         });
 
       chart.render();
-      this.initCanvas.cake = chart;
     },
     account(list, key, id) {
       // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
@@ -792,6 +791,7 @@ export default {
         nameText = v.content_desc;
         break;
       }
+      if(!nameText) return;
       Dialog.alert({
         title: this.$route.query.title + "-" + nameText,
         message: val,