<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 {
      titles: "长势监测",
      untils: "万亩",
      pieOptions:[{
        value: 0,
        name: '很差',
        getbl: '0',
        itemStyle: {
            normal: {
                color: '#a70024',
            }
          }
      },{
        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:["很差", "差", "较差", "中等", "较好", "好", "很好"],
    };
  },
  created() {
    
  },
  watch:{
    optionsType:{
      handler(newV) {
        this.initRT()
      },
      deep: true,
    }
  },
  methods: {
    initRT() {
      let getbl = []
      getbl = [0, 0, 2, 6, 4, 87, 1]
        
      let Chart = this.$refs.areas;
      let myChart = this.$echarts.init(Chart);
      let that = this;
      let getname = this.getname
      
      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: this.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>
