<template>
  <div class="crop-area">
    <Model :title="titles">
      <div ref="areas" class="area"></div>
    </Model>
  </div>
</template>

<script>
import Model from "../model.vue";

export default {
  name: "area",
  components: { Model },
  props: {
    title: "随县",
  },
  data() {
    return {
      titles: "随县高标准农田",
      datas: ["2021年", "2022年", "2023年", "2024年"],
      dataValue: [8.34, 10.2, 9.93, 10],
      untils: "万亩",
    };
  },
  created() {
    if (this.title == "新街镇") {
      this.titles = "作物面积";
      this.datas = ["水稻", "玉米", "豆类", "薯类"];
      this.dataValue = [71242.1542, 11548.2565, 456, 30.8516];
      this.untils = "亩";
    }
  },
  mounted() {
    this.initRT();
  },
  methods: {
    initRT() {
      let Chart = this.$refs.areas;
      let myChart = this.$echarts.init(Chart);
      let that = this;
      const option = {
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          // data: ['水稻', '玉米', '薯类', '其他'],
        },
        grid: {
          top: "15%",
          left: "20%",
          bottom: "10%",
        },
        color: ["#82F3C5", "#405DF9", "#EFC740", "#A8A3FD"],
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            return `${params[0].name} :  ${params[0].value}${this.untils}`;
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        xAxis: {
          type: "category",
          data: this.datas,
          // data: ['水稻', '玉米', '薯类', '棉花','油菜'],
          axisLine: {
            lineStyle: {
              color: "#02FEFF",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          // name: '亩',
          //   max: 10,
          //   min: 0,
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(2, 254, 255,0.3)",
            },
          },
          axisLabel: {
            formatter: `{value} ${this.untils}`,
          },
        },
        series: [
          {
            data: this.dataValue,
            type: "bar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFFF",
                  },
                  {
                    offset: 1,
                    color: "#0080FF",
                  },
                ]),
              },
            },
          },
          // {
          //     name: '水稻',
          //     type: 'bar',
          // },
          // {
          //     type: 'bar',
          //     name: '玉米',
          //     data: [600, 1900, 3700, 500]
          // },
          // {
          //     type: 'bar',
          //     name: '薯类',
          //     data: [2400, 1400, 3700, 500]
          // },
          // {
          //     type: 'bar',
          //     name: '其他',
          //     data: [400, 2600, 1400, 2800]
          // }
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.crop-area {
  margin-top: 10px;

  .area {
    width: 100%;
    height: 225px;
  }
}
</style>
