<template>
  <div class="crop-percent">
    <Model :title="titles">
      <div ref="percents" class="percents"></div>
    </Model>
  </div>
</template>

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

export default {
  name: "percent",
  components: { Model },
  props: {
    title: "随县",
  },
  data() {
    return {
      titles: "作物占比",
      getname: ["水稻", "玉米", "薯类", "棉花", "油菜", "其他"],
      getbl: [61, 7, 7, 5.8, 1.2, 18],
      data: [
        {
          value: 61,
          name: "水稻",
          itemStyle: {
            color: "#82F3C5",
          },
        },
        {
          value: 7,
          name: "玉米",
          itemStyle: {
            color: "#405DF9",
          },
        },
        {
          value: 7,
          name: "薯类",
          itemStyle: {
            color: "#458B74",
          },
        },
        {
          value: 5.8,
          name: "棉花",
          itemStyle: {
            color: "#FFFFFF",
          },
        },
        {
          value: 1.2,
          name: "油菜",
          itemStyle: {
            color: "#b1d85c",
          },
        },
        {
          value: 18,
          name: "其他",
          itemStyle: {
            color: "#A8A3FD",
          },
        },
      ],
      untils: "%",
    };
  },
  created() {
    if (this.title == "新街镇") {
      this.titles = "耕地质量等级面积";
      this.getname = [
        "二等地",
        "三等地",
        "四等地",
        "五等地",
        "六等地",
        "七等地",
      ];
      this.getbl = [0.48, 6.85, 0.87, 53.79, 13.11, 24.89];
      //   this.untils = "mg/kg";
      this.data = [
        {
          value: 39.85,
          name: "二等地",
          itemStyle: {
            color: "#82F3C5",
          },
        },
        {
          value: 563.06,
          name: "三等地",
          itemStyle: {
            color: "#405DF9",
          },
        },
        {
          value: 71.08,
          name: "四等地",
          itemStyle: {
            color: "#458B74",
          },
        },
        {
          value: 4419.71,
          name: "五等地",
          itemStyle: {
            color: "#deed4d",
          },
        },
        {
          value: 1077.5,
          name: "六等地",
          itemStyle: {
            color: "#b1d85c",
          },
        },
        {
          value: 2044.85,
          name: "七等地",
          itemStyle: {
            color: "#A8A3FD",
          },
        },
      ];
    }
  },
  mounted() {
    this.initRT();
  },
  methods: {
    initRT() {
      const getname = this.getname;
      const getbl = this.getbl;
      let Chart = this.$refs.percents;
      let myChart = this.$echarts.init(Chart);
      const option = {
        animation: false,
        tooltip: {
          trigger: "item",
          formatter: "{b} :  {d}%",
        },
        legend: {
          orient: "vertical",
          right: this.title == "新街镇" ? "-2%" : "3%",
          icon: "circle",
          top: "bottom",
          textStyle: {
            color: "#02FEFF",
            fontSize: 16,
            rich: {
              a: {
                color: "#FFFFFF",
                width: 45,
                fontSize: 14,
              },
              b: {
                width: 35,
                fontSize: 14,

                color: "#FFFFFF",
              },
            },
          },
          formatter: function (name) {
            for (var i = 0; i < getname.length; i++) {
              if (name == getname[i]) {
                return `{a|${name}}{b|占比:}${getbl[i]}%`;
              }
            }
          },
          data: getname,
        },
        series: [
          {
            type: "pie",

            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            data: this.data,
            radius: ["40%", "75%"],
            center: ["25%", "50%"],
            roseType: "radius",
            itemStyle: {
              normal: {
                color: "transparent",
                label: {
                  padding: [-30, 0, 0, 0],
                },
                labelLine: {
                  showAbove: true,
                  length: 30,
                  length2: 0,
                  show: true,
                  lineStyle: {
                    color: "rgba(102, 121, 157, 1)",
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

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

  .percents {
    width: 100%;
    height: 210px;
  }
}
</style>
