内容更改

shuishen

2022-04-29 443c649303cc275f4ff07b3d2f5e589047f8054d

 src/pcviews/large/index.vue

@@ -14,14 +14,34 @@
            </div>
        </div>
        <div class="left-container">
            <div class="top" id="LeftTop"></div>
            <div class="center" id="LeftCenter"></div>
            <div class="bottom" id="LeftBottom"></div>
            <div class="top">
                <div class="l-title">
                    <span class="text">建筑统计</span>
                </div>
                <div class="l-content" id="LeftTop"></div>
            </div>
            <div class="center">
                <div class="l-title"></div>
                <div class="l-content" id="LeftCenter"></div>
            </div>
            <div class="bottom">
                <div class="l-title"></div>
                <div class="l-content" id="LeftBottom"></div>
            </div>
        </div>
        <div class="right-container">
            <div class="top" id="RightTop"></div>
            <div class="center" id="RightCenter"></div>
            <div class="bottom" id="RightBottom"></div>
            <div class="top">
                <div class="r-title"></div>
                <div class="r-content" id="RightTop"></div>
            </div>
            <div class="center">
                <div class="r-title"></div>
                <div class="r-content" id="RightCenter"></div>
            </div>
            <div class="bottom">
                <div class="r-title"></div>
                <div class="r-content" id="RightBottom"></div>
            </div>
        </div>
    </div>
</template>
@@ -54,11 +74,8 @@
            // 柱形图
            // 因为初始化echarts 的时候，需要指定的容器 id='main'
            this.$echarts.init(document.getElementById('LeftTop')).setOption({
                title: {
                    text: '建筑物统计'
                },
                grid: {
                    // top: '2%',
                    top: '4%',
                    left: '3%',
                    right: '3%',
                    bottom: '2%',
@@ -69,19 +86,39 @@
                    nameRotate: 45,
                    data: ['文教建筑', '医疗建筑', '体育建筑', '展览建筑', '商业建筑', '行政建筑', '观演建筑'],
                    axisLabel: {
                        color: '#5ce7ff',
                        color: '#fff',
                        rotate: 35
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                    type: 'value',
                    axisLabel: {
                        color: '#fff'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    itemStyle: {
                        color: '#38ACD7'
                    }
                }]
            })
@@ -404,7 +441,7 @@
        position: absolute;
        top: 130px;
        left: 10px;
        width: 24%;
        width: 20%;
        height: calc(100% - 140px);
        // transform: rotateY(10deg);
        // transform-origin: left center;
@@ -414,7 +451,7 @@
        position: absolute;
        top: 130px;
        right: 10px;
        width: 24%;
        width: 20%;
        height: calc(100% - 140px);
    }

@@ -432,11 +469,38 @@
        }

        .center {
            background: rgba(248, 248, 248, 0.75);
        }

        .bottom {
            background: rgba(248, 248, 248, 0.75);
        }

        .l-title,
        .r-title {
            position: relative;
            height: 40px;
            background: url('/img/bg/echarts-title.png');
            background-size: 100% 100%;
            color: #fff;

            .text {
                position: absolute;
                top: 0;
                left: 20px;
                right: auto;
                bottom: 0;
                margin: auto;
                font-size: 18px;
                line-height: 40px;
                font-weight: 700;
                font-style: italic;
                letter-spacing: 2px;
            }
        }
        .l-content,
        .r-content {
            height: calc(100% - 40px);
            background: url('/img/bg/echarts-content.png');
            background-size: 100% 100%;
        }
    }
}