190 lines
3.6 KiB
Vue
190 lines
3.6 KiB
Vue
<template>
|
|
<div class="analysis">
|
|
<!-- <h3 class="analysis-title">土地利用与规划分析</h3> -->
|
|
<el-row :gutter="16" style="margin-bottom: 10px">
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<custom-echart-pie :chart-data="state.landData" height="460px" :option="state.landOption" />
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="hover">
|
|
<custom-echart-bar :chart-data="state.cropData" height="460px" :option="state.cropOption" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="16">
|
|
<el-col :span="24">
|
|
<el-card shadow="hover">
|
|
<custom-echart-multi-line :chart-data="state.landTrendData" height="500px" :option="state.landTrendOption" type="line" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
|
|
const state = reactive({
|
|
landOption: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: '土地用途分析',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['耕地', '林地', '建设用地'],
|
|
},
|
|
label: {
|
|
color: '#333',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: [80, 140],
|
|
roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 20,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
landData: [
|
|
{ value: 100, name: '耕地' },
|
|
{ value: 105, name: '林地' },
|
|
{ value: 217, name: '建设用地' },
|
|
],
|
|
cropOption: {
|
|
title: {
|
|
text: '作物种植结构',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['土豆', '西红柿', '玉米', '花生', '水稻'],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '面积（亩）',
|
|
// splitLine: {
|
|
// show: false,
|
|
// },
|
|
},
|
|
series: [
|
|
{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
barWidth: 50,
|
|
data: [],
|
|
itemStyle: {
|
|
borderRadius: 25,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
cropData: [
|
|
{ value: 230, name: '土豆' },
|
|
{ value: 165, name: '西红柿' },
|
|
{ value: 217, name: '玉米' },
|
|
{ value: 200, name: '花生' },
|
|
{ value: 305, name: '水稻' },
|
|
],
|
|
landTrendOption: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: '土地变更趋势',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '年份',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '面积（亩）',
|
|
// splitLine: {
|
|
// show: false,
|
|
// },
|
|
},
|
|
},
|
|
landTrendData: [
|
|
{
|
|
type: '耕地',
|
|
value: 40,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '林地',
|
|
value: 146,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '建设用地',
|
|
value: 81,
|
|
name: '2022',
|
|
},
|
|
{
|
|
type: '耕地',
|
|
value: 60,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '林地',
|
|
value: 186,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '建设用地',
|
|
value: 101,
|
|
name: '2023',
|
|
},
|
|
{
|
|
type: '耕地',
|
|
value: 230,
|
|
name: '2024',
|
|
},
|
|
{
|
|
type: '林地',
|
|
value: 256,
|
|
name: '2024',
|
|
},
|
|
{
|
|
type: '建设用地',
|
|
value: 301,
|
|
name: '2024',
|
|
},
|
|
{
|
|
type: '耕地',
|
|
value: 160,
|
|
name: '2025',
|
|
},
|
|
{
|
|
type: '林地',
|
|
value: 286,
|
|
name: '2025',
|
|
},
|
|
{
|
|
type: '建设用地',
|
|
value: 161,
|
|
name: '2025',
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.analysis {
|
|
&-title {
|
|
font-size: 20px;
|
|
color: #000;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
</style>
|