yudao-dev/src/views/order/monitoring/components/monitoringRingCharts.vue

<template>
	<div>
		<div class="boxTitle">
			<span class="blueTitle"></span>
			<span>各集团订单环形图</span>
		</div>
		<div
			class="chartBox"
			id="orderChartBox"
			v-show="chartList.length">
			<div
				class="chartItem"
				v-for="(item, index) in chartList"
				:key="index"
				:style="{
					width: 388 * beilv + 'px',
					height: 286 * beilv + 'px',
					padding: 14 * beilv + 'px',
					marginRight: 9 * beilv + 'px',
					marginBottom: 9 * beilv + 'px',
				}">
				<div
					class="topTitle"
					:style="{ fontSize: 14 * beilv + 'px' }">
					<svg-icon
						icon-class="order-monitoring"
						:style="{ fontSize: 16 * beilv + 'px' }" />
					<span
						class="orderName"
						:style="{
							paddingRight: 8 * beilv + 'px',
							marginRight: 8 * beilv + 'px',
						}">
						{{ item.orderGroupName }}
					</span>
					<span>订单计划数量{{ item.num }}</span>
				</div>
				<div
					:id="item.id"
					:style="{
						width: 166 * beilv + 'px',
						height: 166 * beilv + 'px',
						margin: 'auto',
					}"></div>
				<div
					class="legend"
					:style="{ height: 54 * beilv + 'px', marginTop: 10 * beilv + 'px' }">
					<div
						class="legendItem"
						v-for="(subItem, i) in item.order"
						:key="i"
						:style="{
							paddingRight: 9 * beilv + 'px',
							marginRight: 9 * beilv + 'px',
						}">
						<span
							class="itemNum"
							:style="{ fontSize: 18 * beilv + 'px' }">
							{{ subItem.value }}
						</span>
						<div>
							<span
								class="itemName"
								:style="{ fontSize: 14 * beilv + 'px' }">
								<span
									class="smallBlock"
									:style="{
										backgroundColor: subItem.color,
										width: 8 * beilv + 'px',
										height: 8 * beilv + 'px',
									}"></span>
								{{ subItem.name }}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 空图 -->
		<div
			class="no-data-bg"
			v-show="!chartList.length"></div>
	</div>
</template>
<script>
import * as echarts from 'echarts';
import { debounce } from '@/utils/debounce';
export default {
	name: 'MonitoringRingCharts',
	props: {
		chartList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			myChart: [],
			beilv: 1,
		};
	},
	mounted() {
		this.canvasReset();
		window.addEventListener('resize', this.canvasReset);
	},
	destroyed() {
		window.removeEventListener('resize', this.canvasReset);
	},
	methods: {
		canvasReset() {
			debounce(() => {
				this.initChart();
			}, 500)();
			this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610;
		},
		// 饼图
		initChart() {
			if (this.chartList.length <= 0) {
				return false;
			}
			// 销毁实例
			for (let j = 0; j < this.chartList.length; j++) {
				if (this.myChart[j]) {
					this.myChart[j].dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
				}
			}
			for (let i = 0; i < this.chartList.length; i++) {
				var chartDom = document.getElementById(this.chartList[i].id);
				this.myChart[i] = echarts.init(chartDom);
				let colorList = [];
				this.chartList[i].order.map((item) => {
					colorList.push(item.color);
				});
				let percentage = (
					(this.chartList[i].sunNum / this.chartList[i].num) *
					100
				).toFixed(0);
				var option = {
					color: colorList,
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: ['75%', '95%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 5,
								borderColor: '#fff',
								borderWidth: 2,
							},
							label: {
								show: true,
								position: 'center',
								color: '#000',
								formatter: [
									'{a|' + percentage + '%}',
									'{b|生产' + this.chartList[i].sunNum + '}',
								].join('\n\n'),
								rich: {
									a: {
										fontSize: this.beilv * 24 + 'px',
									},
									b: {
										fontSize: this.beilv * 12 + 'px',
									},
								},
							},
							emphasis: {
								disabled: true,
							},
							labelLine: {
								show: false,
							},
							data: this.chartList[i].order,
						},
					],
				};
				option && this.myChart[i].setOption(option);
			}
		},
	},
};
</script>
<style lang='scss' scoped>
.chartBox {
	width: 100%;
	padding-right: 6px;
	height: calc(100vh - 356px);
	display: flex;
	flex-flow: row wrap;
	overflow: auto;
	align-content: flex-start;
	.chartItem {
		border-radius: 8px;
		border: 1px solid #cacaca;
		.topTitle {
			margin-bottom: 10px;
			.orderName {
				border-right: 1px solid #cacaca;
			}
		}
		.legend {
			text-align: center;
			white-space: nowrap;
			overflow: auto;
			.legendItem {
				display: inline-block;
				border-right: 1px solid #e8e8e8;
				.itemName {
					.smallBlock {
						display: inline-block;
					}
				}
			}
			.legendItem:last-child {
				border: none;
			}
		}
	}
}
</style>