real3d-portalsite/src/views/homepage/gdbh.vue

<!-- 总体指标 -->
<!-- 区划面积、常驻人口、海岸线长、海岛数量 -->
<template>
    <div class="gdbh">
        <div class="shang"></div>
        <div class="xia center" >
            <div style=" background-size: 100% 100% ; width: 310px; height: 50px;">
                <div style="float: left; width: 45%; height: 48px;margin-left: 10px; 
                    background-image: url('/static/images/homepage/05-1 耕地保护指标.png'); background-size: 100% 100%; ">
                    <div style="margin-top:0px;margin-left:5px;">耕地保有量</div>
                    <div style="padding-top:0px; font-size: 16px;">309.8km2</div>
                </div>
                <div style="float: left; width: 45%; height: 48px;margin-left: 10px; 
                    background-image: url('/static/images/homepage/05-1 耕地保护指标.png'); background-size: 100% 100%; ">
                    <div style="margin-top:0px;margin-left:5px;">高标准农田</div>
                    <div style="padding-top:0px; font-size: 16px;">309.8km2</div>
                </div>
            </div>
            <div style="width: 160px;  height: 18px; margin-left:75px ;margin-top:3px; background-image: url('/static/images/homepage/05-2 耕地保护二级小标题.png'); background-size: 100% 100%;">耕地质量</div>
            <div id="gdbh_xia" style="width: 310px; height: 130px; "></div>
            <div id="gdbh_xia2" style="width: 310px; height: 130px;"></div>
        </div>
    </div>
</template>
<script>
import Day from '../../components/Crontab/day.vue';
export default {
    name: "overallIndicator",
    components: {
        Day
    },
    data() {
        return {
            mianji:"",
            renkou:"",
            haianxian:"",
            haidao:103,
        };
    },
    created() {
       
    },
    mounted() {
        this.getRenKou();
        this.getRenKou2();
    },
    methods: {
        getRenKou(){
            var dom  = document.getElementById('gdbh_xia');
            var myChart = window.echarts.init(dom);
            let option = {
                color:['#fe792e','#fedb4b', '#00edfe','#2a71ff'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '70%',
                    top: '15%',
                    textStyle: {
                        color: '#ffffff' // 设置图例字体颜色为红色
                    }
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '80%',
                    center: ["30%", "50%"],
                    data: [
                        { value: 484, name: '优等地' },
                        { value: 1048, name: '上等地' },
                        { value: 735, name: '中等地' },
                        { value: 180, name: '下等地' }
                    ],
                    emphasis: {
                        // itemStyle: {
                        //     shadowBlur: 10,
                        //     shadowOffsetX: 0,
                        //     shadowColor: 'rgb(254, 222, 82, 0)'
                        // }
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    }
                ]
            };

            myChart.setOption(option);
        },
        getRenKou2(){
            var chartDom = document.getElementById('gdbh_xia2');
            var myChart = window.echarts.init(chartDom);
            var option;

            option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                axisLabel: {
                    textStyle: {
                        color: 'aliceblue' // 设置字体颜色为红色
                    }
                },
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: 'aliceblue' // 设置字体颜色为红色
                    }
                }
            },
            series: [
                {
                name: "耕地保有量",
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: '30%' ,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                    ])
                },
            },
            ],
            grid:{ // 让图表占满容器
                top:"8px",
                left:"30px",
                right:"5px",
                bottom:"20px"
            }
            };
            option && myChart.setOption(option);
        }
    },
}
</script>

<style lang="scss" scoped>
.gdbh {
    width: 300px;
    height:396PX;
    min-height: 100px;
    font-size: 12px;
    // background: red;
    margin-top: 10px;
    margin-left: 10px;
    display: block;
}

.shang {
    width: 300px;
    height:50PX;
    min-height: 50px;
    background-image: url("/static/images/homepage/01-5 标题 耕地保护.png");
    background-size: 100% 100%;
}

.xia {
    color:aliceblue;
}
.center{
    margin-left: 3%;
    
}
</style>