<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: "随县",
  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      titles: "作物面积",
      data: ["水稻", "玉米", "薯类", "棉花", "油菜", "其他"],
      dataValue: [105, 12, 12, 10, 1, 31],
      untils: "万亩",
    };
  },
  created() {
    if (this.title == "新街镇") {
      this.titles = "耕地质量等级比例";

      this.dataValue = [0.48, 6.85, 0.87, 53.79, 13.11, 24.9];
      this.untils = "%";
      this.data = ["二等地", "三等地", "四等地", "五等地", "六等地", "七等地"];
    }
  },
  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: ['2020年', '2021年', '2022年', '2023年'],
          data: this.data,
          axisLine: {
            lineStyle: {
              color: "#02FEFF",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          // name: '亩',
          //   max: 120,
          //   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",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

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

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