<template>
  <div class="analysis">
    <el-row :gutter="16" style="margin-bottom: 10px">
      <el-col :span="12">
        <el-card shadow="hover">
          <custom-echart-bar :chart-data="state.yieldTrendData" height="460px" :option="state.yieldTrendOption" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <custom-echart-line :chart-data="state.yieldData" height="460px" :option="state.yieldOption" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="24">
        <el-card shadow="hover">
          <custom-echart-mixin :chart-data="state.inputOtputRatioData" :option="state.inputOtputRatioOption" height="500px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { reactive } from 'vue';

const state = reactive({
  yieldTrendOption: {
    color: ['#3685fe', '#41b879', '#ffd500'],
    title: {
      text: '产量趋势',
      textStyle: {
        color: '#333',
      },
    },
    label: {
      color: '#333',
    },
    barStyle: {
      barWidth: 50,
      stack: 'total',
    },
  },
  yieldTrendData: [
    { value: 80, type: '花生', name: '耿马镇' },
    { value: 105, type: '花生', name: '大兴乡' },
    { value: 187, type: '花生', name: '孟定镇' },
    { value: 100, type: '土豆', name: '耿马镇' },
    { value: 125, type: '土豆', name: '大兴乡' },
    { value: 217, type: '土豆', name: '孟定镇' },
    { value: 200, type: '玉米', name: '耿马镇' },
    { value: 155, type: '玉米', name: '大兴乡' },
    { value: 247, type: '玉米', name: '孟定镇' },
  ],
  yieldOption: {
    color: ['#3685fe', '#41b879', '#ffd500'],
    title: {
      text: '单产水平',
      textStyle: {
        color: '#333',
      },
    },
    xAxis: {
      type: 'category',
      name: '年份',
    },
    yAxis: {
      type: 'value',
      name: '产量',
      // splitLine: {
      //   show: false,
      // },
    },
  },
  yieldData: [
    {
      type: '花生',
      value: 40,
      name: '2022',
    },
    {
      type: '土豆',
      value: 146,
      name: '2022',
    },
    {
      type: '玉米',
      value: 81,
      name: '2022',
    },
    {
      type: '花生',
      value: 60,
      name: '2023',
    },
    {
      type: '土豆',
      value: 166,
      name: '2023',
    },
    {
      type: '玉米',
      value: 101,
      name: '2023',
    },
    {
      type: '花生',
      value: 80,
      name: '2024',
    },
    {
      type: '土豆',
      value: 176,
      name: '2024',
    },
    {
      type: '玉米',
      value: 91,
      name: '2024',
    },
  ],
  inputOtputRatioOption: {
    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
    title: {
      text: '投入品产出比',
      textStyle: {
        color: '#333',
      },
    },
    legend: {
      data: ['农药', '化肥', '产出', '产出比'],
    },
  },
  inputOtputRatioData: [
    {
      name: '耿马',
      value: 40,
      type: '农药',
      seriesType: 'bar',
    },
    {
      name: '耿马',
      value: 30,
      type: '化肥',
      seriesType: 'bar',
    },
    {
      name: '耿马',
      value: 100,
      type: '产出',
      seriesType: 'bar',
    },
    {
      name: '耿马',
      value: 60,
      type: '产出比',
      seriesType: 'line',
    },
    {
      name: '大香乡',
      value: 20,
      type: '农药',
      seriesType: 'bar',
    },
    {
      name: '大香乡',
      value: 20,
      type: '化肥',
      seriesType: 'bar',
    },
    {
      name: '大香乡',
      value: 80,
      type: '产出',
      seriesType: 'bar',
    },
    {
      name: '大香乡',
      value: 40,
      type: '产出比',
      seriesType: 'line',
    },
  ],
});
</script>
<style lang="scss" scoped>
.analysis {
  &-title {
    font-size: 20px;
    color: #000;
    margin-bottom: 40px;
  }
}
</style>
