fix:echars图表原型修改

src/pages/components/HomePage.vue

@@ -6,11 +6,46 @@
 		</form>
 		<!-- 显示 -->
 		<div class="echarts1">
-			<van-loading v-if="isLoading" color="#1989fa" />
-			<div v-if="!isLoading" id="myChart1"></div>
-			<div v-if="!isLoading" id="myChart2"></div>
+			<div style="width: 50%; position: relative;">
+				<div id="myChart1" style="width: 100%;"></div>
+				<div class="legend">
+					<div @click="action(0)">
+						<div class="ball"></div>
+						<div>签收成功</div>
+					</div>
+					<div @click="action(1)">
+						<div class="ball" style="background-color: #f98407;"></div>
+						<div>派件中</div>
+					</div>
+					<div @click="action(2)">
+						<div class="ball" style="background-color: #f9df07;"></div>
+						<div>派件失败</div>
+					</div>
+
+				</div>
+			</div>
+
+			<div style="width: 50%; position: relative;">
+				<div id="myChart2" style="width: 100%;"></div>
+				<div class="legend">
+					<div @click="actionTwo(0)">
+						<div class="ball"></div>
+						<div>揽收成功</div>
+					</div>
+					<div @click="actionTwo(1)">
+						<div class="ball" style="background-color: #f98407;"></div>
+						<div>待揽收</div>
+					</div>
+					<div @click="actionTwo(2)">
+						<div class="ball" style="background-color: #f9df07;"></div>
+						<div>未揽收</div>
+					</div>
+
+				</div>
+			</div>
 
 		</div>
+
 		<!-- 图标 -->
 		<div class="icon">
 			<div class="icon-box">
@@ -66,6 +101,31 @@ export default {
 			expressMap: {}, //收件
 			mailMap: {}, //寄件
 			isLoading: false,//
+			echartsOneData: [{
+				value: 0,
+				name: '签收成功'
+			},
+			{
+				value: 0,
+				name: '派送中'
+			},
+			{
+				value: 0,
+				name: '派送失败'
+			},],
+			echartsTwoData: [{
+				value: 0,
+				name: '揽收成功'
+			},
+			{
+				value: 0,
+				name: '待揽收'
+			},
+
+			{
+				value: 0,
+				name: '未揽收'
+			},]
 		}
 	},
 	async mounted() {
@@ -78,16 +138,13 @@ export default {
 		}
 		this.isLoading = false
 		const { dispatchStatistics = [], pickupStatistics = [] } = resValue.data
-		let signSuccessfully = 0; // 签收成功
-		let outOfDelivery = 0; // 派送中
-		let deliveryFailure = 0; // 派送失败
 		dispatchStatistics.forEach(({ expressStatus, number }) => {
-			if (expressStatus == "1") {
-				outOfDelivery = number
-			} else if (expressStatus == "2") {
-				signSuccessfully = number
+			if (expressStatus == "2") {
+				this.echartsOneData[0].value = number  // 签收成功
+			} else if (expressStatus == "1") {
+				this.echartsOneData[1].value = number // 派送中
 			} else if (expressStatus == "4") {
-				deliveryFailure = number
+				this.echartsOneData[2].value = number // 派送失败
 			}
 		})
 		let waiteCollecte = 0 //待揽收
@@ -95,46 +152,50 @@ export default {
 		let collecteSuccess = 0 //揽收成功
 		pickupStatistics.forEach(({ express_status, number }) => {
 			if (express_status == "1") {
-				waiteCollecte = number
-				noCollecte = number
+				this.echartsTwoData[1].value = number  //待揽收
+				this.echartsTwoData[2].value = number  //未揽收
 			} else if (express_status == "2") {
-				collecteSuccess = number
+				this.echartsTwoData[0].value = number //揽收成功
 			}
 		})
-
-		// 页面加载完成唤醒微信扫一扫
-		//本地 注释  服务器 放开
 		setTimeout(() => {
+			// 页面加载完成唤醒微信扫一扫
+			//本地 注释  服务器 放开
 			let myChart = this.$echarts.init(document.getElementById('myChart1'))
+
 			var option = {
 				tooltip: {
-					// show: false,
+					show: false, //展示牌
 					trigger: 'item'
 				},
-				legend: {
-					top: '65%',
-					left: '30%',
-					orient: 'vertical',
-					icon: 'circle',
-					itemGap: 6,
-					textStyle: {
-						fontSize: 10,
-					}
-
-				},
+				// legend: {
+				// 	show: false,
+				// 	selectedMode: 'single', //有三种属性 single单选 ， multiple多选 ， false ，禁选
+				// 	top: '65%',
+				// 	left: '30%',
+				// 	orient: 'vertical',
+				// 	icon: 'circle',
+				// 	itemGap: 6,
+				// 	textStyle: {
+				// 		fontSize: 10,
+				// 	}
+
+				// },
 				series: [{
 					name: '数据',
+					data: this.echartsOneData,
 					type: 'pie',
 					center: ["50%", "35%"],
 					radius: ['40%', '60%'],
 					avoidLabelOverlap: false,
 					label: {
 						normal: {
-							show: true,
+							show: false, //初始展示
 							position: 'center',
 							color: '#4c4a4a',
-							formatter: '{active|' + '今日累计收件' + '}' + '\n\r' + '{total|' + signSuccessfully +
-								'}',
+							formatter: function (params) {
+								return `{active|${params.data.name}}\n\r{total|${params.data.value}}`
+							},
 							rich: {
 								total: {
 									fontSize: 12,
@@ -156,38 +217,36 @@ export default {
 					labelLine: {
 						show: false
 					},
-					data: [{
-						value: signSuccessfully,
-						name: '签收成功'
-					},
-					{
-						value: outOfDelivery,
-						name: '派送中'
-					},
-					{
-						value: deliveryFailure,
-						name: '派送失败'
-					},]
+
 				}]
 			}
 			myChart.setOption(option)
+			this.myChart = myChart
+			this.myChart.on('click', (params) => {
+				console.log(params.data.value, params, '===========================')
+				// 取消所有高亮  
+				this.myChart.dispatchAction({
+					type: 'downplay',
+					seriesIndex: 0,
+					// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+					dataIndex: [0, 1, 2]
+				});
+
+				this.myChart.dispatchAction({
+					type: 'highlight',
+					seriesIndex: 0,
+					dataIndex: params.dataIndex
+				});
+			});
+
 
+			// 图2
 			let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
 			var option2 = {
 				tooltip: {
+					show: false, //展示牌
 					trigger: 'item'
 				},
-				legend: {
-					top: '65%',
-					left: '30%',
-					orient: 'vertical',
-					icon: 'circle',
-					itemGap: 6,
-					textStyle: {
-						fontSize: 10,
-					}
-
-				},
 				series: [{
 					name: '数据',
 					type: 'pie',
@@ -196,11 +255,12 @@ export default {
 					avoidLabelOverlap: false,
 					label: {
 						normal: {
-							show: true,
+							show: false,
 							position: 'center',
 							color: '#4c4a4a',
-							formatter: '{active|' + '今日累计下单' + '}' + '\n\r' + '{total|' + collecteSuccess +
-								'}',
+							formatter: function (params) {
+								return `{active|${params.data.name}}\n\r{total|${params.data.value}}`
+							},
 							rich: {
 								total: {
 									fontSize: 12,
@@ -222,28 +282,62 @@ export default {
 					labelLine: {
 						show: false
 					},
-					data: [{
-						value: collecteSuccess,
-						name: '揽收成功'
-					},
-					{
-						value: waiteCollecte,
-						name: '待揽收'
-					},
-
-					{
-						value: noCollecte,
-						name: '未揽收'
-					},
-					]
+					data: this.echartsTwoData
 				}]
 			}
 			myChart2.setOption(option2)
-
+			this.myChart2 = myChart2
+			this.myChart2.on('click', (params) => {
+				console.log(params.data.value, params, '===========================')
+				// 取消所有高亮  
+				this.myChart2.dispatchAction({
+					type: 'downplay',
+					seriesIndex: 0,
+					// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+					dataIndex: [0, 1, 2]
+				});
+
+				this.myChart2.dispatchAction({
+					type: 'highlight',
+					seriesIndex: 0,
+					dataIndex: params.dataIndex
+				});
+			});
 		}, 500)
 
 	},
 	methods: {
+		// 图表点击设置，因为需求和echars的API有冲突，所以自己写了一个图例
+		action(dataIndex) {
+			// 先取消所有高亮
+			this.myChart.dispatchAction({
+				type: 'downplay',
+				seriesIndex: 0,
+				// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+				dataIndex: [0, 1, 2]
+			});
+			// 指定高亮
+			this.myChart.dispatchAction({
+				type: 'highlight',
+				seriesIndex: 0,
+				dataIndex: dataIndex
+			});
+		},
+		actionTwo(dataIndex) {
+			// 先取消所有高亮
+			this.myChart2.dispatchAction({
+				type: 'downplay',
+				seriesIndex: 0,
+				// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+				dataIndex: [0, 1, 2]
+			});
+			// 指定高亮
+			this.myChart2.dispatchAction({
+				type: 'highlight',
+				seriesIndex: 0,
+				dataIndex: dataIndex
+			});
+		},
 		// 点击搜索icon
 		wxScanCode() {
 			wx.scanQRCode({
@@ -350,7 +444,6 @@ export default {
 	}
 
 	.echarts1 {
-		width: 100%;
 		height: 4.2rem;
 		background: white;
 		display: flex;
@@ -359,11 +452,38 @@ export default {
 
 		#myChart1,
 		#myChart2 {
-			// width: 100%;
-			// height: 100%;
 			width: 50%;
 			height: 200px;
-			// margin: 0 auto;
+		}
+
+		.legend {
+			font-size: 12px;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			position: absolute;
+			bottom: 0px;
+			width: 100%;
+
+			>div {
+				margin-left: 50%;
+				transform: translateX(-20%);
+				align-self: baseline;
+				margin-bottom: 4px;
+				display: flex;
+				width: 100%;
+
+				.ball {
+					margin-top: 2px;
+					width: 13px;
+					height: 13px;
+					border-radius: 50%;
+					background-color: #07daf9;
+					margin-right: 10px;
+					align-items: baseline;
+				}
+			}
 		}
 	}