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: [25, 68],
+        // height: '100%',
+        left: 'center',
+        // width: '100%',
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        label: {
+          position: 'inside',
+          textStyle: {
+            fontSize: '16px',
+            fontWeight: 700,
+            // color: '#333'
+          }
+        },
+        data: data1.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.name === '参议院' ? '#055FC2' : '#FFA940'
+            }
+          }
+        })
+      },
       {
         type: 'pie',
         radius: [70, 100],
         height: '100%',
         left: 'center',
-      width: '100%',
+        width: '80%',
         itemStyle: {
           borderColor: '#fff',
           borderWidth: 1
@@ -42,8 +71,20 @@ const getDoublePieChart = (data) => {
             labelLinePoints: points
           };
         },
-      data: data
-    }]
+        data: data2.map(item => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: item.type === '参议院' ? '#8AC4FF' : '#FFD591'
+
+            }
+          }
+        })
+      }
+
+
+    ]
   }
   return option
 }