rt-sim-training-client/src/views/dashboard/echarts/permission.vue

<template>
  <div>
    <div :id="id" :style="{height: size.height+'px', width: size.width+'px'}" />
    <div class="lesson-select">
      <el-select v-model="mapName" placeholder="请选择地图线路" size="mini" style="width: 300px">
        <el-option v-for="name in mapNameList" :key="name" :label="name" :value="name" />
      </el-select>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { listUserPermision } from '@/api/management/author';

export default {
	props: {
		id: {
			type: String,
			default: 'chart'
		},
		size: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			option: {
				color: ['#003366', '#006699', '#4cabce', '#e5323e'],
				backgroundColor: '#F0F2F5',
				title: {
					text: '',
					subtext: '',
					subtextStyle: {
						color: '#909399'
					},
					y: 10,
					left: 'center',
					textAlign: 'center'
				},
				tooltip: {
				},
				grid: [{
					top: 80,
					width: '50%',
					bottom: '5%',
					left: 10,
					containLabel: true
				}],
				xAxis: {
					type: 'value',
					show: false,
					minInterval: 1
				},
				yAxis: {
					type: 'category',
					show: false,
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					data: []
				},
				series: [{
					type: 'bar',
					stack: 'chart',
					z: 3,
					label: {
						normal: {
							show: true,
							position: 'right'
						}
					},
					barWidth: 30,
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
					},
					data: []
				}, {
					type: 'pie',
					radius: [0, '70%'],
					center: ['75%', '52%'],
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.percent}%`; }
					},
					data: []
				}]
			},
			mapName: null,
			mapNameList: [],
			permissionList: [],
			chart: null
		};
	},
	watch: {
		size() {
			return this.chart.resize({...this.size, silent: false});
		},
		async mapName(val) {
			await this.loadExamData(val);
		}
	},
	mounted() {
		this.initChart();
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
				this.permissionList = resp.data.list.filter(elem => { return parseInt(elem.status) > 0; });
				this.mapNameList = [...new Set(this.permissionList.map(elem => { return elem.mapName; })), ''];
				this.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
			});
			this.chart = echarts.init(document.getElementById(this.id));
			this.chart.setOption(this.option);
		},
		async loadExamData(mapName) {
			if (mapName) {
				var data = {};
				var permissionType = {};
				var list = await this.$Dictionary.permissionType();
				if (list) {
					(list ||[]).forEach(elem => {
						permissionType[elem.code] = elem.name;
					});
				}

				(this.permissionList.filter(elem => { return elem.mapName == mapName; })|| []).forEach(elem => {
					data[`${elem.mapProductName}-${permissionType[elem.type]}`] = elem.remains;
				});

				const keys = Object.keys(data);
				const values = Object.values(data);
				const sum = keys.length > 0? values.reduce((total, num) => total + num) : 0;
				this.option.title.text = `剩余权限分布图（${mapName}）`;
				this.option.title.subtext = `权限总计${sum}个`;
				this.option.xAxis.show = true;
				this.option.yAxis.show = true;
				this.option.yAxis.data = keys;
				this.option.series[0].data = values;
				this.option.series[1].data = keys.map(name => { return {name, value: data[name]}; });
			} else {
				this.option.xAxis.show = false;
				this.option.yAxis.show = false;
				this.option.title.text = `剩余权限分布图（暂无地图线路数据）`;
				this.option.title.subtext = `权限总计0个`;
			}

			this.chart.setOption(this.option);
		}
	}
};
</script>
<style scoped>
.lesson-select {
    position: absolute;
    display: flex;
    top: 30px;
	right: 30px;
}
</style>