echarts超出显示

shuishen

2022-11-07 59c37285be3f76e426b46c49af9a72741e6bde67

echarts超出显示

 src/views/home/components/leftContainer.vue

@@ -3,16 +3,9 @@
        <div class="person-box">
            <div class="title">
                <div>
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)"
                    >现有人员</span>/
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 1 }"
                        @click="peopleTabClick(1)"
                    >重点人员</span>
                    <span class="peopleTap" :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)">现有人员</span>/
                    <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                </div>
                <div>
                    共
@@ -35,18 +28,13 @@
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
        </div>
        <div class="house-box">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
                    <div class="num">182万户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
@@ -356,16 +344,23 @@
                            position: 'right', // 标签右对齐
                            distance: 0,// 标签距离柱条的距离
                            formatter: params => {
                                return params.data.realValue + '个'
                                let msg
                                if (params.data.realValue > 10000) {
                                    msg = (params.data.realValue / 10000).toFixed(2) + '万个'
                                } else {
                                    msg = params.data.realValue + '个'
                                }

                                return msg
                            }
                        }
                    }
                ],
                grid: {
                    x: 70,
                    y: 10,
                    x2: 10,
                    y2: 20
                    top: '2%',
                    left: '60',
                    right: '40',
                    bottom: '2%'
                },

            }
@@ -823,6 +818,7 @@
        .back:hover {
            color: #43bafe;
        }

        .back::after {
            font-family: element-icons;
            content: '\e6ea';
@@ -870,7 +866,7 @@
                color: #fff;
            }

            & > div:nth-of-type(2) {
            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -891,7 +887,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -907,7 +903,7 @@
            width: 100%;
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }
    }