<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: "苗情监测",
      // prosdata: ["水稻", "玉米", "薯类", "棉花", "油菜", "其他"],
      // dataValue: [64, 12, 2, 5, 7, 10],
      untils: "万亩",
      pieOptions:[{
        value: 34,
        name: '四类苗',
        getbl: '34',
        itemStyle: {
            normal: {
                color: '#82F3C5',
            }
          }
      },{
        value: 40,
        name: '三类苗',
        getbl: '40',
        itemStyle: {
            normal: {
              color: '#405DF9',
            }
          }
      },{
        value: 16,
        name: '二类苗',
        getbl: '16',
        itemStyle: {
            normal: {
              color: '#EFC740',
            }
          }
      },{
        value: 10,
        name: '一类苗',
        getbl: '10',
        itemStyle: {
            normal: {
              color: '#A8A3FD',
            }
          }
      },{
        value: 0,
        name: '云量',
        getbl: '0',
        itemStyle: {
            normal: {
              color: '#BECDD0',
            }
          }
      }],
      getname:['四类苗', '三类苗', '二类苗', '一类苗', '云量'],
    };
  },
  created() {
    
  },
  watch:{
    optionsType:{
      handler(newV) {
        this.initRT()
      },
      deep: true,
    }
  },
  methods: {
    initRT() {
      let getbl = []
      if (this.optionsType == 'bcqjc') {
        this.getname = ['无风险', '低风险', '中风险', '高风险']
        getbl = [83, 10, 6, 1]
        this.pieOptions = [{
        value: 83,
        name: '无风险',
        getbl: '83',
        itemStyle: {
            normal: {
                color: '#82F3C5',
            }
          }
      },{
        value: 10,
        name: '低风险',
        getbl: '10',
        itemStyle: {
            normal: {
              color: '#405DF9',
            }
          }
      },{
        value: 6,
        name: '中风险',
        getbl: '6',
        itemStyle: {
            normal: {
              color: '#EFC740',
            }
          }
      },{
        value: 1,
        name: '高风险',
        getbl: '1',
        itemStyle: {
            normal: {
              color: '#A8A3FD',
            }
          }
      }]
      } else {
        this.getname = ['四类苗', '三类苗', '二类苗', '一类苗', '云量']
        getbl = [34, 40, 16, 10, 0]
        this.pieOptions = [{
        value: 34,
        name: '四类苗',
        getbl: '34',
        itemStyle: {
            normal: {
                color: '#82F3C5',
            }
          }
      },{
        value: 40,
        name: '三类苗',
        getbl: '40',
        itemStyle: {
            normal: {
              color: '#405DF9',
            }
          }
      },{
        value: 16,
        name: '二类苗',
        getbl: '16',
        itemStyle: {
            normal: {
              color: '#EFC740',
            }
          }
      },{
        value: 10,
        name: '一类苗',
        getbl: '10',
        itemStyle: {
            normal: {
              color: '#A8A3FD',
            }
          }
      },{
        value: 0,
        name: '云量',
        getbl: '0',
        itemStyle: {
            normal: {
              color: '#BECDD0',
            }
          }
      }]
      }
      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%",
        },
        // graphic: [
        //   {
        //     //环形图中间添加文字
        //     type: "text", //通过不同top值可以设置上下显示
        //     left: '26%',
        //     top: "center",
        //     style: {
        //       text: `作物\n占比`,
        //       textAlign: "center",
        //       fill: "#82F3C5", //文字的颜色
        //       fontSize: 20,
        //       lineHeight: 32,
        //     },
        //   },
        // ],
        color: ["#37ffeb"],
        tooltip: {
          trigger: "item",
          formatter: "{b} :  {d}%",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        series: [
          {
            color: ['#05CFF7', '#1978E5', '#EAB966', '#60B45E', '#BECDD0', '#5C6BF6', '#EFC740'],
            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>
