<template>
  <div class="crop-area">
      <div ref="areas" class="area"></div>
  </div>
</template>

<script>

export default {
  name: "echartsBar",
  props: {
    title: "",
    optionsType:{
      type: String,
      default:''
    }
  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      
    };
  },
  created() {
    
  },
  watch:{
    optionsType:{
      handler(newV) {
        this.initRT()
      },
      deep: true,
    }
  },
  methods: {
    initRT() {
      let getbl = []
      let getname = []
      let pieOptions = []
      if (this.optionsType == 'flhjc') {
        getbl = [4, 96]
        pieOptions = [{
          value: 4,
          name: '非粮食作物',
          itemStyle: {
              normal: {
                color: '#f89454',
              }
            }
        },{
          value: 96,
          name: '非粮食作物',
          itemStyle: {
              normal: {
                color: '#026a38',
              }
            }
        }]
        getname = ["非粮食作物", "粮食作物"]
      } else {
        getbl = [0, 2, 6, 4, 87, 1]
        pieOptions = [{
          value: 0,
          name: '高城镇',
          getbl: '0',
          itemStyle: {
              normal: {
                color: '#f89454',
              }
            }
        },{
          value: 0.25,
          name: '殷店镇',
          getbl: '2',
          itemStyle: {
              normal: {
                color: '#fef8b4',
              }
            }
        },{
          value: 0.74,
          name: '厉山镇',
          getbl: '6',
          itemStyle: {
              normal: {
                color: '#5ab761',
              }
            }
        },{
          value: 0.53,
          name: '草店镇',
          getbl: '4',
          itemStyle: {
              normal: {
                color: '#128947',
              }
            }
        },{
          value: 11.06,
          name: '淮河镇',
          getbl: '87',
          itemStyle: {
              normal: {
                color: '#036d39',
              }
            }
        },{
          value: 0.13,
          name: '尚市镇',
          getbl: '1',
          itemStyle: {
              normal: {
                color: '#026a38',
              }
            }
        }]
        getname = ["高城镇", "殷店镇", "厉山镇", "草店镇", "淮河镇", "尚市镇"]
      }
        
      let Chart = this.$refs.areas;
      let myChart = this.$echarts.init(Chart);
      
      const option = {
        legend: {
          orient: "vertical",
          right: "5%",
          icon: "circle",
          top: "center",
          textStyle: {
            color: "#02FEFF",
            fontSize: 16,
            rich: {
              a: {
                color: "#FFFFFF",
                width: 45,
                fontSize: 16,
              },
              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}}  ${getbl[i]}%`;
              }
            }
          },
          data: getname,
        },
        grid: {
          top: "15%",
          left: "15%",
          bottom: "15%",
        },
        color: ["#37ffeb"],
        tooltip: {
          trigger: "item",
          formatter: "{b} :  {d}%",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        series: [
          {
            name: '长势监测',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            // roseType: "radius",
            label: {
              show: false,
              position: 'left',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                color: '#ffffff',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: pieOptions,
            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay: function () {
              return Math.random() * 100;
            },
          },
        ],
      };
      myChart.setOption(option);

    },
  },
};
</script>

<style lang="less" scoped>
.crop-area {
  margin-top: 0.10rem;
  width: 100%;
    height: 100%;
  .area {
    width: 100%;
    height: 100%;
  }
}
</style>
