MZbigScreen/src/components/PatrolmanStatistics/1.vue

<template>
    <div id="myChart" style="width: 100%; height: 100%;"></div>
</template>

<script>
    import { oldPersonSelectUserBySex } from '../../api'
    export default {
        //巡防员性别分布统计
        name: "PatrolmanSexCount",
        data() {
            return {
                dataArr: [],
                colorArr: ['rgba(0, 227,255, 1)', 'rgba(253, 200, 1, 1)'],
                myChart: null
            }
        },
        methods: {
            async draw() {
                const result = await oldPersonSelectUserBySex({}, 'POST');
                this.dataArr = result;

                const seriesArr = [];
                const titleArr = [];

                for (let i = 0; i < this.dataArr.length; i++) {
                    const d = this.dataArr[i];

                    titleArr.push({
                        text: d.label,
                        left: "12%",
                        top: `${i == 0 ? 13 : 55}%`,
                        textAlign: "center",
                        textStyle: {
                            fontSize: "16",
                            fontWeight: 'normal',
                            color: "#fff"
                        }
                    });

                    titleArr.push({
                        text: `${d.percent}%`,
                        left: "68%",
                        top: `${i == 0 ? 13 : 55}%`,
                        textAlign: "center",
                        textStyle: {
                            fontSize: "20",
                            fontWeight: 'normal',
                            color: this.colorArr[i]
                        }
                    });

                    const borderArr = new Array(this.dataArr.length).fill({});
                    borderArr[i] = {value: 317, symbolPosition: 'start'};

                    seriesArr.push({
                        type: 'pictorialBar',
                        symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
                        symbolSize: [317, 47],
                        symbolOffset: [0, 0],
                        data: borderArr,
                        label: {
                            show: true,
                            position: 'right',
                            offset: [-120, 0],
                            color: this.colorArr[this.colorArr.length - 1 - i],
                            fontSize: 20,
                            fontWeight: 'bold',
                            formatter: () => {
                                return `${d.value}人`;
                            }
                        },
                        z: 1
                    });

                    const step = (Math.floor(parseInt(d.percent) / 10) < 1 ? 1 : Math.floor(parseInt(d.percent) / 10));
                    for (let j = 0; j < 10; j++) {
                        const blockArr = new Array(this.dataArr.length).fill({});
                        blockArr[this.dataArr.length - 1 - i] = {value: 317, symbolPosition: 'start'};

                        let symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-default.png')}`;
                        if (j < step) {
                            if (i == 0) {
                                symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-male.png')}`;
                            } else {
                                symbolImage = `image://${require('../../assets/PatrolmanStatistics/sex-female.png')}`;
                            }
                        }

                        seriesArr.push({
                            type: 'pictorialBar',
                            symbol: symbolImage,
                            symbolSize: [19, 37],
                            symbolOffset: [10 + j * 31, 0],
                            data: blockArr,
                            z: 2
                        });
                    }

                }

                this.myChart = this.$echarts.init(document.getElementById('myChart'));
                this.myChart.setOption({
                    title: titleArr,
                    grid: {
                        left: "2%",
                        right: "2%",
                        top: "16%",
                        bottom: "2%",
                    },
                    xAxis: {
                        max: 300,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: seriesArr
                });
            }
        },
        watch: {
            data() {
                this.myChart.destroy();
                this.draw();
            }
        },
        mounted() {
            this.draw();
        }
    }
</script>

<style scoped>

</style>