首页样式

src/views/modules/lingshan/home/cpts/chart/bar-dj/option.js

@@ -112,7 +112,7 @@ export default function optionFn() {
 				},
 				itemStyle: {
 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: "#68BBC4" },
+						{ offset: 0, color: "#f33" }, // 68BBC4
 						{ offset: 1, color: "rgba(255, 255, 255, 0)" },
 					]),
 				},

src/views/modules/lingshan/home/cpts/chart/bar-sj/option.js

@@ -145,7 +145,7 @@ export default function optionFn() {
 				},
 				itemStyle: {
 					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-						{ offset: 0, color: "#68BBC4" },
+						{ offset: 0, color: "#f33" }, // 68BBC4
 						{ offset: 1, color: "rgba(255, 255, 255, 0)" },
 					]),
 				},

src/views/modules/lingshan/home/cpts/chart/pie-ts/index.vue

@@ -60,8 +60,8 @@ export default {
 		async orgId(val) {
 			if (val) {
 				// await this.getData();
-				this.iniChart();
-				this.setChartData();
+				// this.iniChart();
+				// this.setChartData();
 			}
 		},
 	},
@@ -112,14 +112,15 @@ methods: {
 			this.showNoData = false;
 			this.$refs.pieChart.clear();
 
-			this.option = optionFn();
+			this.option = optionFn(this.$refs.pieChart.myChart);
 			const {
 				chartData: { series },
 			} = this;
-			this.option.legend.formatter = (type) => {
-				let item = series[0].data.find((val) => val.name == type);
-				return type + "：" + item.value;
-			};
+			// this.option.legend.formatter = (type) => {
+			// 	let item = series[0].data.find((val) => val.name == type);
+			// 	console.log('========type', type, item)
+			// 	return type + "：" + item.value;
+			// };
 			this.$refs.pieChart.setOption(this.option, true);
 		},
 
@@ -141,6 +142,6 @@ methods: {
 <style lang="scss" scoped>
 .m-chart {
 	width: 100%;
-	height: 150px;
+	height: 300px;
 }
 </style>

src/views/modules/lingshan/home/cpts/chart/pie-ts/option.js

@@ -1,6 +1,6 @@
 import * as echarts from "echarts";
 
-export default function optionFn() {
+export default function optionFn(myChart) {
 	return {
 		// title: {
 		// 	text: "事件类型",
@@ -15,49 +15,90 @@ export default function optionFn() {
 		// tooltip: {
 		// 	show: true,
 		// },
-		animationDurationUpdate: 300,
 
-		legend: {
-			type: "scroll",
-			orient: "vertical",
-			right: 0,
-			top: 20,
-			bottom: 20,
-			itemWidth: 8,
-			itemHeight: 8,
-			textStyle: {
-				color: "rgba(181, 217, 255, 0.75)",
-			},
-			// data: [],
+		grid: {
+			top: "20%",
+			left: "3%",
+			right: "3%",
+			bottom: "10%",
+			containLabel: true,
 		},
 
+		tooltip: {
+			trigger: "item",
+		},
+		animationDurationUpdate: 300,
+
+		// legend: {
+		// 	type: "scroll",
+		// 	orient: "vertical",
+		// 	right: 0,
+		// 	top: 20,
+		// 	bottom: 20,
+		// 	itemWidth: 8,
+		// 	itemHeight: 8,
+		// 	textStyle: {
+		// 		color: "rgba(181, 217, 255, 0.75)",
+		// 	},
+		// 	// data: [],
+		// },
+
 		series: [
 			{
-				name: "特殊人群分类",
+				name: "",
 				type: "pie",
-				radius: ["50%", "80%"],
-				center: ["30%", "50%"],
+				radius: ["35%", "55%"],
+				center: ["50%", "50%"],
 				avoidLabelOverlap: false,
+
 				label: {
-					show: false,
-					position: "center",
+					show: true,
+					// position: "center",
 
-					formatter(n, s) {
-						console.log(n, s);
-						return n.data.name + "：" + n.data.value;
+					// formatter(n, s) {
+					// 	console.log(n, s);
+					// 	return n.data.name + "：" + n.data.value;
+					// },
+					formatter: '{name|{b}}\n{value|{c} 人}',
+
+					alignTo: "edge",
+					minMargin: 5,
+					edgeDistance: 10,
+					lineHeight: 15,
+					rich: {
+						value: {
+							fontSize: 10,
+							color: "#999",
+						},
 					},
 				},
+
+				labelLine: {
+					length: 15,
+					length2: 0,
+					maxSurfaceAngle: 80,
+				},
+
+				labelLayout: function (params) {
+					const isLeft = params.labelRect.x < myChart.getWidth() / 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,
+					};
+				},
+
 				emphasis: {
 					label: {
-					  show: true,
-					  fontSize: 14,
-					  fontWeight: 'bold',
-					  color:'#fff',
-					  formatter:'{d}%'
-					}
-				  },
-				labelLine: {
-					show: false,
+						show: true,
+						fontSize: 14,
+						fontWeight: "bold",
+						color: "#fff",
+						formatter: "{d}%",
+					},
 				},
 				itemStyle: {
 					normal: {

src/views/modules/lingshan/home/index.scss

@@ -98,3 +98,8 @@
         }
     }
 }
+
+.m-tb {
+    @include scrollBar;
+    height: 300px;
+}

src/views/modules/lingshan/home/index.vue

@@ -86,6 +86,44 @@
 			<el-col :span="12">
 				<div class="m-box">
 					<div class="box-title">工作日志</div>
+
+					<div class="m-tb">
+						<el-table
+							:data="rizhiData"
+							border
+							style="width: 100%"
+							class="resi-table"
+							:max-height="1000"
+						>
+							<el-table-column
+								label="序号"
+								type="index"
+								align="center"
+								width="50"
+							/>
+							<el-table-column prop="orgName" label="组织部门" />
+							<el-table-column
+								prop="staffName"
+								label="工作人员"
+							/>
+							<el-table-column prop="content" label="工作内容" />
+							<el-table-column prop="time" label="时间" />
+							<el-table-column
+								fixed="right"
+								label="操作"
+								align="center"
+							>
+								<template slot-scope="scope">
+									<el-button
+										@click="watchRizhi(scope.$index)"
+										type="text"
+										size="small"
+										>查看</el-button
+									>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
 				</div>
 			</el-col>
 			<el-col :span="12">
@@ -113,7 +151,7 @@ import barTs from "./cpts/chart/bar-ts";
 import pieTs from "./cpts/chart/pie-ts";
 
 export default {
-	components: { barDj, barSj, barTs, pieTs  },
+	components: { barDj, barSj, barTs, pieTs },
 
 	data() {
 		return {
@@ -151,10 +189,21 @@ export default {
 					time: "4月5日 12:33",
 				},
 			],
+
+			rizhiData: [
+				{
+					orgName: "小稻池村党委",
+					staffName: "张三",
+					content: "发布党建活动",
+					time: "2022-02-02 02:02:02",
+				},
+			],
 		};
 	},
 	mounted() {},
-	methods: {},
+	methods: {
+		watchRizhi() {},
+	},
 };
 </script>