PM20221203225_MobileWeb.git

<template>
    <div class="manholePanel">
        <div class="menutop">
            <div class="menuback" @click="back">
                <i class="el-icon-arrow-left"></i><span>统计</span>
            </div>
            <div class="menutitle">窨井</div>
        </div>
        <div style="margin-top: 0.2rem" class="manholeContainer">
            <!-- <el-tabs type="border-card">
                <el-tab-pane label="类型统计">
                    
                </el-tab-pane>
                <el-tab-pane label="区划统计">
                    <div id="manholeBar"></div>
                </el-tab-pane>
            </el-tabs> -->
            <el-radio-group v-model="selectedType" @input="handleChange">
                <el-radio-button label="pie">类型</el-radio-button>
                <el-radio-button label="bar">区划</el-radio-button>
            </el-radio-group>
            <div id="manholeChart"></div>
        </div>
    </div>
</template>
 
<script>
import * as echarts from 'echarts';
import _ from 'lodash'
import store from "@/utils/store.js";
export default {
    name: 'ManholePanel',
    data() {
        return {
            selectedType: 'pie',
            typeData: [
                { value: 8.2, name: "其他" },
                { value: 3.2, name: "监控井" },
                { value: 1.4, name: "电力井" },
                { value: 1.2, name: "交通井" },
            ],
            amountData: [3500, 1725, 2947, 3400, 1700, 1200, 2500, 1401, 2100, 1324]
        }
    },
    mounted() {
        this.getPie();
    },
    methods: {
        handleChange(label) {
            if (label === 'pie') {
                this.getPie();
            } else {
                this.getBar();
            }
        },
        getValue(name){
          let filtered=_.filter(this.typeData,['name',name])[0];
          return filtered.value
        },
        getPie() {
            let that = this;
            let pieChartDom = document.getElementById('manholeChart');
            let myPieChart = echarts.init(pieChartDom);
            myPieChart.clear();
            let img =
                "data:image/png;base64,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";
 
            let trafficWay = that.typeData;
 
            let data = [];
            let color = [
                "#0067F3",
                "#0099F3",
                "#FF9B1A",
                "#FFB80D",
                "#80E6FF",
                "#0DCCFF",
                "#0DFFC3",
                "#A1FFE3"
            ];
            for (let i = 0; i < trafficWay.length; i++) {
                data.push(
                    {
                        value: trafficWay[i].value,
                        name: trafficWay[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 5,
                                // borderColor: color[i],
                                shadowColor: color[i * 2],
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    {
                                        offset: 0,
                                        color: color[i * 2],
                                    },
                                    {
                                        offset: 1,
                                        color: color[i * 2 + 1],
                                    },
                                ]),
                            },
                        },
                    },
                    {
                        value: 1,
                        name: "",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                                color: "rgba(0, 0, 0, 0)",
                                borderColor: "rgba(0, 0, 0, 0)",
                                borderWidth: 0,
                            },
                        },
                    }
                );
            }
            let seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    radius: [85, 89],
                    center: ["50%", "50%"],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: "outside",
                                color: "#000",
                                formatter: function (params) {
                                    var percent = 0;
                                    var total = 0;
                                    for (var i = 0; i < trafficWay.length; i++) {
                                        total += trafficWay[i].value;
                                    }
                                    percent = ((params.value / total) * 100).toFixed(0);
                                    if (params.name !== "") {
                                        return (
                                            // "窨井类型：" +
                                            params.name +
                                            // "\n" +
                                            // "\n" +
                                            // "占百分比：" +
                                            percent +
                                            "%"
                                        );
                                    } else {
                                        return "";
                                    }
                                },
                            },
                            labelLine: {
                                length: 5,
                                length2: 15,
                                show: true,
                                color: "#000",
                            },
                        },
                    },
                    data: data,
                },
            ];
            let option = {
                color: color,
                title: {
                    text: "窨井类型",
                    top: "47%",
                    textAlign: "center",
                    left: "50%",
                    textStyle: {
                        color: "#000",
                        fontSize: 22,
                        fontWeight: "400",
                    },
                },
                graphic: {
                    elements: [
                        {
                            type: "image",
                            z: 3,
                            style: {
                                image: img,
                                width: 140,
                                height: 140,
                            },
                            left: "center",
                            top: "center",
                            position: [100, 100],
                        },
                    ],
                },
                tooltip: {
                    show: false,
                },
                legend: {
                    // icon: "circle",
                    orient: "horizontal",
                    // x: 'left',
                    data: ["其他", "监控井", "电力井", "交通井"],
                    // right: 40,
                    bottom: 5,
                    align: "left",
                    textStyle: {
                        color: "#000",
                    },
                    itemGap: 10,
                    formatter: function (name) {
                        let percent1 = 0;
                        let total1 = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total1 += trafficWay[i].value;
                        }
                        percent1 = ((that.getValue(name) / total1) * 100).toFixed(0);
                        if (name !== "") {
                            return (
                                // "窨井类型：" +
                                name +
                                "\n" +
                                "\n" +
                                // "占百分比：" +
                                percent1 +
                                "%"
                            );
                        } else {
                            return "";
                        }
                    },
                },
                toolbox: {
                    show: false,
                },
                series: seriesOption,
            };
            // let option = {
            //     grid: {
            //         x2: 10
            //     },
            //     tooltip: {
            //         trigger: "item",
            //         formatter: "{a} <br/>{b} : {c} ({d}%)",
            //     },
            //     color: ["#8fc31f", "#f35833", "#00ccff", "#ffcc00"],
            //     legend: {
            //         orient: "vertical",
            //         x: "left",
            //         data: ["其他", "监控井", "电力井", "交通井"],
            //         // formatter: function (name) {
            //         //     var oa = option.series[0].data;
            //         //     var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
            //         //     for (var i = 0; i < option.series[0].data.length; i++) {
            //         //         if (name == oa[i].name) {
            //         //             return (
            //         //                 name +
            //         //                 "     " +
            //         //                 oa[i].value +
            //         //                 "     " +
            //         //                 ((oa[i].value / num) * 100).toFixed(2) +
            //         //                 "%"
            //         //             );
            //         //         }
            //         //     }
            //         // },
            //     },
            //     series: [
            //         {
            //             name: "窨井类型分析",
            //             type: "pie",
            //             radius: "50%",
            //             center: ["52%", "55%"],
            //             data: that.typeData,
            //             itemStyle: {
            //                 emphasis: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: "rgba(0, 0, 0, 0.5)",
            //                 },
            //             },
            //             itemStyle: {
            //                 normal: {
            //                     label: {
            //                         show: true,
            //                         //                                position:'inside',
            //                         // formatter: "{d}%",
            //                         formatter: '{b}\n{d}%',
            //                     },
            //                 },
            //                 labelLine: { show: true },
            //             },
            //         },
            //     ],
            // };
            option && myPieChart.setOption(option);
        },
        getBar() {
            let that = this;
            let barChartDom = document.getElementById('manholeChart');
            let myBarChart = echarts.init(barChartDom);
            myBarChart.clear();
            let option = {
                color: ["#FFD700"],
                grid: {
                    x: 40,
                    y: 40,
                    x2: 80
                },
                xAxis: {
                    type: 'category',
                    data: ['荣华街道', '博兴街道', '亦庄镇', '旧宫镇', '瀛海镇', '台湖镇', '马驹桥镇', '青云店镇', '长子营镇', '采育镇'],
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        color: "#000"
                    },
                    axisTick: {
                        show: false//不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: true,//不显示坐标轴线
                        lineStyle: {
                            color: "#b7c8eb"
                        }
                    },
                    name: '(行政区划)',
                    nameLocation: 'end',
                    nameTextStyle: {
                        fontSize: 14,
                        color: '#000'
                        // padding: [32, 0, 0, 0]
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '(窨井数量)',
                    //nameRotate: '90',
                    nameLocation: 'end',
                    nameTextStyle: {
                        fontSize: 14,
                        padding: [0, 0, 0, -10]
                    },
                    axisTick: {
                        show: false//不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false,//不显示坐标轴线
                    },
                    splitLine: {     //网格线
                        "show": false
                    }
                },
                series: [
                    {
                        data: that.amountData,
                        type: 'bar',
                        barWidth: 6,
                        // barGap:'90%'
                        itemStyle: {  // 使用方法二的写法
                            color: {
                                type: 'linear',
                                x: 0,  //右
                                y: 0,  //下
                                x2: 0,  //左
                                y2: 1,  //上
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#9FC3F3 ' // 0% 处的颜色
                                    },
                                    // {
                                    //     offset: 0.7,
                                    //     color: '#2378f7' // 70% 处的颜色
                                    // },
                                    {
                                        offset: 1,
                                        color: '#3460BC ' // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                    }
                ]
            };
            option && myBarChart.setOption(option);
        },
        back() {
            store.setManholeStatisticsShow(false);
        }
    },
}
</script>
 
<style scoped>
.manholePanel {
    position: absolute;
    color: black;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 4001;
 
}
 
.el-tabs--border-card /deep/ .el-tabs__header {
    background-color: lightgray;
    border-radius: 0.05rem;
}
 
.el-tabs {
    border-radius: 0.05rem;
    position: absolute;
    height: 80%;
    width: 94%;
}
 
.el-tabs /deep/ .el-tabs__nav-wrap {
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
}
 
.el-tabs /deep/ .el-tabs__item {
    padding: 0 0.2rem;
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
}
 
.el-tabs /deep/ .el-tabs__content {
    height: 90%;
    overflow: scroll;
}
 
#manholeChart {
    width: 375px;
    height: 320px;
}
 
.manholeContainer {
    padding: 0.1rem 0.1rem;
}
 
/deep/ .el-radio-button .el-radio-button__inner{
    width: 184px !important;
}
</style>