居民监管，图表显示调整，住房监管，柱状图数据对接

shuishen

2024-01-29 dc1e4fb2aec77fbbdbf3ef763c17e742df99c992

居民监管，图表显示调整，住房监管，柱状图数据对接

 src/styles/avue-ui.scss

@@ -70,21 +70,24 @@
        justify-content: space-between;


        .echarts-cell:nth-child(1),
        .echarts-cell:nth-child(2) {
            height: 300px;
            width: calc(50% - 5px);
        }
        // .echarts-cell:nth-child(1),
        // .echarts-cell:nth-child(2) {
        //     height: 300px;
        //     width: calc(50% - 5px);
        // }

        .echarts-cell:nth-child(3),
        .echarts-cell:nth-child(4),
        .echarts-cell:nth-child(5) {
            margin-top: 10px;
            height: 300px;
            width: calc((100% / 3) - 6.66px);
        }
        // .echarts-cell:nth-child(3),
        // .echarts-cell:nth-child(4),
        // .echarts-cell:nth-child(5) {
        //     margin-top: 10px;
        //     height: 300px;
        //     width: calc((100% / 3) - 6.66px);
        // }

        .echarts-cell {
            margin: 0 5px;
            height: 300px;
            width: calc(20% - 10px);
            display: flex;
            flex-direction: column;
            background: #fff;
@@ -104,4 +107,16 @@
        padding: 10px;
        background: #fff;
    }
}

.cur-house-hold-supervision-page {
    .echarts-cell:nth-child(1) {
        width: 0;
        flex: 1;
    }

    .echarts-cell:nth-child(2) {
        width: 0;
        flex: 2;
    }
}

 src/views/propertySupervision/houseHoldSupervision.vue

@@ -833,29 +833,27 @@

        setEchartsOption (data) {
            let option = {
                // title: {
                //     text:"房屋",
                //     left: 'center',
                //     top:20,
                // },
                tooltip: {
                    trigger: 'item'
                    trigger: 'item',
                    confine: true
                },
                legend: {
                    orient: 'vertical',
                    right: 30,
                    bottom: 10
                    right: 60,
                    bottom: 0,
                    padding: [30, 0],
                    formatter: function (name) {
                        return name.length > 6 ? name.substr(0, 6) + '...' : name
                    }
                },
                //             labelLine: {
                //   length: 15,
                //   length2: 0,
                //   maxSurfaceAngle: 80
                // },
                series: [{
                    type: 'pie',
                    center: ['36%', '50%'],
                    radius: '80%', //修改大小
                    data: [],
                    label: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
@@ -883,14 +881,25 @@
        },

        setBarEchartsOption (data) {
            let legendData = ['商品房', '自建房', '安置房', '公房', '危房', '出租房']

            var chartDom = document.getElementById('bar-echarts')
            var myChart = echarts.init(chartDom)
            var option = {
            if (this.myChart) {
                this.myChart.clear()
                this.myChart.dispose()
            }

            this.myChart = echarts.init(chartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: true
                },
                grid: {
                    left: '3%',
@@ -906,63 +915,75 @@
                    }
                },
                yAxis: {
                    type: 'value'
                    type: 'value',
                    minInterval: 1
                },
                series: []
            }

            // option && myChart.setOption(option)
            if (data && data.length) {
                const rawData = data.reduce((pre, cur) => {
                    legendData.forEach(item => {
                        let curItem = cur.child.find(i => i.labelName == item)

            // for (let i = 0, ii = data.length; i < ii; i++) {
            //     option.xAxis[0].data.push(data[i].name)
            //     option.series[0].data.push(data[i].counts)
            //     option && myChart.setOption(option)
            // }
                        if (curItem) {
                            let curPre = pre.find(i => i.name == item)

            const rawData = [
                [100, 302, 301, 334, 390, 330, 320],
                [320, 132, 101, 134, 90, 230, 210],
                [220, 182, 191, 234, 290, 330, 310],
                [150, 212, 201, 154, 190, 330, 410],
                [820, 832, 901, 934, 1290, 1330, 1320]
            ]
            const totalData = []
            for (let i = 0; i < rawData[0].length; ++i) {
                let sum = 0
                for (let j = 0; j < rawData.length; ++j) {
                    sum += rawData[j][i]
                            if (curPre) {
                                pre = pre.map(i => {
                                    if (i.name == item) i.data.push(curItem.num)

                                    return i
                                })
                            } else {
                                pre.push({
                                    name: item,
                                    data: [curItem.num]
                                })
                            }
                        }
                    })

                    return pre
                }, [])

                let xData = data.map(item => item.name)

                let typeData = legendData

                option.xAxis.data = xData

                option.series = typeData.map((name, sid) => {
                    return {
                        name,
                        type: 'bar',
                        stack: 'total',
                        barWidth: '60%',
                        label: {
                            show: false,
                        },
                        data: rawData[sid].data
                    }
                })
            } else {
                option = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: 12
                        }
                    }
                }
                totalData.push(sum)
            }

            let xData = [
                'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
            ]

            let typeData = ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
            this.myChart.setOption(option)

            option.xAxis.data = xData

            option.series = typeData.map((name, sid) => {
                return {
                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: '60%',
                    label: {
                        show: true,
                        formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
                    },
                    data: rawData[sid].map((d, did) =>
                        totalData[did] <= 0 ? 0 : d / totalData[did]
                    )
                }
            })

            myChart.setOption(option)

            myChart.on('click', (params) => {
                console.log(params)
            this.myChart.on('click', (params) => {
                this.query.neiName = params.data.name
                this.onLoad(this.page, this.query)
            })

 src/views/propertySupervision/residentSupervision.vue

@@ -796,12 +796,17 @@
        setEchartsOption (data) {
            let option = {
                tooltip: {
                    trigger: 'item'
                    trigger: 'item',
                    confine: true
                },
                legend: {
                    orient: 'vertical',
                    right: 30,
                    bottom: 10
                    right: 10,
                    bottom: 0,
                    padding: [30, 0],
                    formatter: function (name) {
                        return name.length > 6 ? name.substr(0, 6) + '...' : name
                    }
                },
                labelLine: {
                    length: 15,
@@ -810,10 +815,12 @@
                },
                series: [{
                    type: 'pie',
                    center: ['36%', '50%'],
                    radius: '80%', //修改大小
                    center: ['26%', '50%'],
                    radius: '60%', //修改大小
                    data: [],

                    label: {
                        show: false
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
@@ -834,16 +841,6 @@
                        name: data[i].children[k].name,
                        id: data[i].children[k].id,
                    })
                }

                if (data[i].children.length > 10) {
                    option.series[0].label = {
                        show: false
                    }
                } else {
                    option.series[0].label = {
                        show: true
                    }
                }

                option.legend.type = series.length > 4 ? "scroll" : "plain"