<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-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,
      // },
    },
    barStyle: {
      // barWidth: 50,
      showBackground: true,
      itemStyle: {
        borderRadius: 10,
      },
    },
  },
  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>
