饼图优化

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

@@ -88,7 +88,7 @@
 <script>
 import { getlive } from "@/api/getList.js";
 import filters from "@/utils/filters/index";
-import F2 from "@antv/f2";
+import F2 from "@antv/f2/lib/index-all";
 import DataSet from "@antv/data-set";
 export default {
   components: {},
@@ -225,20 +225,6 @@ export default {
         id: "audienceSex",
         pixelRatio: window.devicePixelRatio,
       });
-
-      // 设置图例项的内容
-      const legendItems = [];
-      list.forEach(function(obj) {
-        const item = {
-          name: obj.name,
-          value: obj.percent + '人',
-          marker: {
-            symbol: "square",
-            radius: 4,
-          },
-        };
-        legendItems.push(item);
-      });
       chart.source(list, {
         percent: {
           formatter: function formatter(val) {
@@ -251,11 +237,25 @@ export default {
         transposed: true,
         radius: 1,
       });
+      chart.legend(false);
       chart.axis(false);
-      chart.legend({
-        position: "left",
-        custom: true,
-        items: legendItems,
+      // 添加饼图文本
+      console.log(list);
+      chart.pieLabel({
+        sidePadding: 40,
+        label1: function label1(data, color) {
+          return {
+            text: data.name,
+            fill: color,
+          };
+        },
+        label2: function label2(data) {
+          return {
+            text: filters.formatNum(data.percent) + "人",
+            fill: "#808080",
+            fontWeight: "bold",
+          };
+        },
       });
       chart
         .interval()
@@ -312,7 +312,7 @@ export default {
         },
       });
       chart.tooltip({
-        showCrosshairs: true,
+        showTitle: true,
       });
 
       chart
@@ -323,8 +323,9 @@ export default {
       chart
         .line()
         .position("time*value")
-        .color("l(90) 0:#1890FF 1:#f7f7f7")
-        .shape("smooth");
+        .color("#1890FF")
+        .shape("smooth")
+        .size(0.5);
       chart.render();
     },
     map() {
@@ -333,28 +334,22 @@ export default {
       )
         .then(res => res.json())
         .then(GeoJSON => {
-          if (!DataSet) return;
           const geoDv = new DataSet.View().source(GeoJSON, {
             type: "GeoJSON",
           });
-
+          console.log(geoDv.rows);
           const chart = new F2.Chart({
             id: "audienceRegion",
-            padding: 0,
             pixelRatio: window.devicePixelRatio,
           });
           chart.legend(false);
           chart.axis(false);
           chart.tooltip(false);
-          console.log(this.region, geoDv.rows);
           chart.source(geoDv.rows);
           chart
             .polygon()
             .position("longitude*latitude")
-            .color("grey")
-            .style({
-              // opacity: 0.3
-            });
+            .color("rgba(0,0,0,.5)");
 
           chart.render();
         });

src/view/index/index.vue

@@ -187,7 +187,7 @@ import {
 import "vant/lib/image/style";
 import "vant/lib/popup/style";
 import "vant/lib/button/style";
-import F2 from "@antv/f2";
+import F2 from "@antv/f2/lib/index-all";
 export default {
   components: {
     vanImage,
@@ -368,21 +368,6 @@ export default {
         id: "cake",
         pixelRatio: window.devicePixelRatio,
       });
-      
-      // 设置图例项的内容
-      const legendItems = [];
-      data.forEach(function(obj) {
-        const item = {
-          name: obj.name,
-          value: filters.formatNum(obj.percent),
-          marker: {
-            symbol: "square",
-            radius: 4,
-          },
-        };
-        console.log(item, obj);
-        legendItems.push(item);
-      });
       chart.source(data, {
         percent: {
           formatter: function formatter(val) {
@@ -395,11 +380,29 @@ export default {
         transposed: true,
         radius: 1,
       });
+      chart.tooltip(false);
+      chart.coord("polar", {
+        transposed: true,
+        radius: 1,
+      });
+      chart.legend(false);
       chart.axis(false);
-      chart.legend({
-        position: "left",
-        custom: true,
-        items: legendItems,
+      // 添加饼图文本
+      chart.pieLabel({
+        sidePadding: 40,
+        label1: function label1(data, color) {
+          return {
+            text: data.name,
+            fill: color,
+          };
+        },
+        label2: function label2(li) {
+          return {
+            text: filters.formatNum(li.percent) + "人",
+            fill: "#808080",
+            fontWeight: "bold",
+          };
+        },
       });
       chart
         .interval()
@@ -529,7 +532,7 @@ export default {
         },
       });
       chart.tooltip({
-        showCrosshairs: true,
+        showTitle: true
       });
 
       chart
@@ -540,8 +543,9 @@ export default {
       chart
         .line()
         .position("name*value")
-        .color("l(90) 0:#1890FF 1:#f7f7f7")
-        .shape("smooth");
+        .color("#1890FF")
+        .shape("smooth")
+        .size(0.5);
       chart.render();
       this.initCanvas[id] = chart;
     },