update

src/router/index.js

@@ -64,7 +64,7 @@ const routes = [
 
   {
     path: '/',
-    redirect: '/overView'
+    redirect: '/billHome'
   },
 
   // 中美博弈概览页面路由

src/views/bill/billHome/index.vue

@@ -328,6 +328,7 @@
 									/>
 								</el-select>
 							</div>
+							<div class="box7-main" id="box7Chart"></div>
 						</div>
 						<div class="box8">
 							<div class="box8-header">
@@ -529,6 +530,7 @@ import headerIcon5 from "./assets/icons/header-icon5.png";
 import getMultiLineChart from "./utils/multiLineChart";
 import getWordCloudChart from "./utils/worldCloudChart";
 import getPieChart from "./utils/piechart";
+import getDoublePieChart from "./utils/doublePieChart";
 
 import bill1 from "./assets/images/bill1.png";
 import bill2 from "./assets/images/bill2.png";
@@ -1068,6 +1070,83 @@ const box9ChartData = ref([
 	}
 ]);
 
+const box7Data = ref([
+	[
+		{
+			name: '众议院',
+			value: 298
+		},
+		{
+			name: '参议院',
+			value: 149
+		}
+		
+	],
+	[
+		{
+			name: '拨款委员会',
+			value: 50,
+			type: '众议院'
+		},
+		{
+			name: '筹款委员会',
+			value: 50,
+			type: '众议院'
+		},
+		{
+			name: '外交事务委员会',
+			value: 46,
+			type: '众议院'
+		},
+		{
+			name: '国土安全委员会',
+			value: 40,
+			type: '众议院'
+		},
+		{
+			name: '司法委员会',
+			value: 40,
+			type: '众议院'
+		},
+		{
+			name: '军事委员会',
+			value: 40,
+			type: '众议院'
+		},
+		{
+			name: '能源和商业委员会',
+			value: 32,
+			type: '众议院'
+		},
+		{
+			name: '拨款委员会1',
+			value: 32,
+			type: '参议院'
+		},
+		{
+			name: '财政委员会',
+			value: 31,
+			type: '参议院'
+		},
+		{
+			name: '能源',
+			value: 30,
+			type: '参议院'
+		},
+		{
+			name: '能源1',
+			value: 30,
+			type: '参议院'
+		},
+		{
+			name: '其他',
+			value: 24,
+			type: '参议院'
+		}
+		
+	]
+])
+
 const box8Data = ref([
 	{
 		name: "汤姆·科顿",
@@ -1124,6 +1203,9 @@ onMounted(async () => {
 	const wordCloudChart = getWordCloudChart(wordCloudData.value);
 	setChart(wordCloudChart, "wordCloudChart");
 
+	const box7Chart = getDoublePieChart(box7Data.value[0], box7Data.value[1])
+	setChart(box7Chart, 'box7Chart')
+
 	const box9Chart = getPieChart(box9ChartData.value, box9ChartColorList.value);
 	setChart(box9Chart, "box9Chart");
 });
@@ -2253,6 +2335,9 @@ onMounted(async () => {
 							align-items: center;
 							justify-content: flex-end;
 						}
+						.box7-main{
+							height: 340px;
+						}
 					}
 					.box8 {
 						width: 527px;

src/views/bill/billHome/utils/doublePieChart.js

-const getDoublePieChart = (data) => {
-  const colorList = ['#8AC4FF','#FFD591']
-  const colorList1 = ['#055FC2','#FFA940']
+
+const getDoublePieChart = (data1, data2) => {
+  const colorList = ['#8AC4FF', '#FFD591']
+  const colorList1 = ['#055FC2', '#FFA940']
   let option = {
     series: [
       {
-      type: 'pie',
-      radius: [70, 100],
-      height: '100%',
-      left: 'center',
-      width: '100%',
-      itemStyle: {
-        borderColor: '#fff',
-        borderWidth: 1
-      },
-      label: {
-        alignTo: 'edge',
-        formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
-        minMargin: 5,
-        edgeDistance: 10,
-        lineHeight: 15,
-        rich: {
-          time: {
-            fontSize: 10,
-            color: '#999'
+        type: 'pie',
+        radius: [25, 68],
+        // height: '100%',
+        left: 'center',
+        // width: '100%',
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        label: {
+          position: 'inside',
+          textStyle: {
+            fontSize: '16px',
+            fontWeight: 700,
+            // color: '#333'
           }
-        }
-      },
-      labelLine: {
-        length: 15,
-        length2: 0,
-        maxSurfaceAngle: 80
-      },
-      labelLayout: function (params) {
-        const isLeft = params.labelRect.x < 556 / 2;
-        const points = params.labelLinePoints;
-        // Update the end point.
-        points[2][0] = isLeft
-          ? params.labelRect.x
-          : params.labelRect.x + params.labelRect.width;
-        return {
-          labelLinePoints: points
-        };
+        },
+        data: data1.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.name === '参议院' ? '#055FC2' : '#FFA940'
+            }
+          }
+        })
       },
-      data: data
-    }]
+      {
+        type: 'pie',
+        radius: [70, 100],
+        height: '100%',
+        left: 'center',
+        width: '80%',
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        label: {
+          alignTo: 'edge',
+          formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
+          minMargin: 5,
+          edgeDistance: 10,
+          lineHeight: 15,
+          rich: {
+            time: {
+              fontSize: 10,
+              color: '#999'
+            }
+          }
+        },
+        labelLine: {
+          length: 15,
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          const isLeft = params.labelRect.x < 556 / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          return {
+            labelLinePoints: points
+          };
+        },
+        data: data2.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.type === '参议院' ? '#8AC4FF' : '#FFD591'
+
+            }
+          }
+        })
+      }
+
+
+    ]
   }
   return option
 }