提交

src/views/Country/components/pieCharts.vue

@@ -11,7 +11,6 @@ import { TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([CanvasRenderer, TooltipComponent, GaugeChart]);
 
-let chart = undefined;
 export default {
   name: "countryLineChart",
   props: ["list"],
@@ -23,49 +22,96 @@ export default {
     };
   },
   filters: {},
+  watch: {
+    list() {
+      this.createChart();
+    },
+  },
   methods: {
     createChart() {
       if (!this.$refs.countryLineChart) return;
-      chart = echarts.init(this.$refs.countryLineChart);
-      chart.resize({
-        height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
-      });
+      if (!this.chart) {
+        this.chart = echarts.init(this.$refs.countryLineChart);
+        this.chart.resize({
+          height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
+        });
+      }
       var option = {
-        tooltip: {
-          formatter: "{a} <br/>{b} : {c}%",
-        },
         series: this.list.map((v, i) => {
           let y = i < 5 ? 25 : 75;
           return {
+            type: "gauge",
+            startAngle: 90,
+            endAngle: -270,
+            center: [((10 + i * 20) % 100) + "%", y + "%"],
+            pointer: {
+              show: false,
+            },
             progress: {
               show: true,
+              overlap: false,
+              roundCap: true,
+              clip: false,
+              itemStyle: {
+                borderWidth: 0,
+              },
             },
-            detail: {
-              valueAnimation: true,
-              formatter: "{value}",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+              },
+            },
+            splitLine: {
+              show: false,
+              distance: 0,
+              length: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+              distance: 50,
             },
-            type: "gauge",
-            center: [((10 + i * 20) % 100) + "%", y + "%"],
             radius: "40%",
             data: [
               {
                 value: (v.score * 100).toFixed(2) - 0,
                 name: v.name,
+                title: {
+                  offsetCenter: ["0%", "-15%"],
+                  width: 100,
+                   overflow: 'truncate'
+                },
+                detail: {
+                  valueAnimation: true,
+                  offsetCenter: ["0%", "15%"],
+                },
               },
             ],
+            title: {
+              fontSize: 14,
+            },
+            detail: {
+              width: 20,
+              height: 14,
+              fontSize: 14,
+              color: "inherit",
+              borderWidth: 0,
+              formatter: "{value}%",
+            },
           };
         }),
       };
 
-      option && chart.setOption(option);
+      option && this.chart.setOption(option);
     },
   },
   mounted() {
-    console.log(this.list);
     this.createChart();
   },
   beforeUnmount: function() {
-    chart.dispose();
+    this.chart.dispose();
   },
   components: {},
 };

src/views/Overlap/Overlap.vue

@@ -2,7 +2,7 @@
   <div class="Overlap">
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
-      <el-breadcrumb-item>具体节目剧目查询</el-breadcrumb-item>
+      <el-breadcrumb-item>节目剧目重叠度</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card class="box-card">
       <el-form
@@ -334,7 +334,7 @@ export default {
           },
           {
             score: 0.31690351782207876,
-            name: "东京奥运会体操比赛",
+            name: "东京奥运会体操比赛东京奥运会体操比赛东京奥运会体操比赛东京奥运会体操比赛",
             channel: "CCTV-5",
             id: 1335563,
           },