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="请选择课程">
        <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: '',
					y: 20,
					left: 'center',
					textAlign: 'center'
				},
				tooltip: {
				},
				grid: [{
					top: 80,
					width: '50%',
					bottom: '5%',
					left: 10,
					containLabel: true
				}],
				xAxis: [{
					type: 'value'
				}],
				yAxis: [{
					type: 'category',
					data: [],
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					}
				}],
				series: [{
					type: 'bar',
					stack: 'chart',
					z: 3,
					label: {
						normal: {
							show: true,
							position: 'right'
						}
					},
					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: '',
			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;
				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) {
			var data = {};
			var list = this.permissionList.filter(elem => { return elem.mapName == mapName; });
			list.forEach(elem => {
				if (!data[elem.mapProductName]) {
					data[elem.mapProductName] = elem.remains;
				} else {
					data[elem.mapProductName] += elem.remains;
				}
			});

			const keys = Object.keys(data);
			const values = Object.values(data);
			const sum = values.reduce((total, num) => total + num);
			this.option.title.text = '所属用户剩余权限分布图';
			this.option.title.subtext = `总计${sum}个`;
			this.option.yAxis[0].data = keys;
			this.option.series[0].data = values;
			this.option.series[1].data = keys.map(name => { return {name, value: data[name]}; });
			this.chart.setOption(this.option);
		}
	}
};
</script>
<style scoped>
.lesson-select {
    position: absolute;
    display: flex;
    top: 40px;
	right: 40px;
}
</style>