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

<script>

export default {
  name: "echartsBar",
  props: {
    title: "随县",
  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      titles: "作物面积",
      // prosdata: ["水稻", "玉米", "薯类", "棉花", "油菜", "其他"],
      // dataValue: [64, 12, 2, 5, 7, 10],
      untils: "万亩",
      pieOptions:[{
        value: 34,
        name: '水稻',
        itemStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0F4859",
                  },
                  {
                    offset: 1,
                    color: "#05CEF6",
                  },
                ]),
            }
          }
      },{
        value: 12,
        name: '玉米',
        itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#217EE6",
                },
                {
                  offset: 1,
                  color: "#0D2936",
                },
              ]),
            }
          }
      },{
        value: 12,
        name: '薯类',
        itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E6B866",
                },
                {
                  offset: 1,
                  color: "#28383A",
                },
              ]),
            }
          }
      },{
        value: 15,
        name: '棉花',
        itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#6BCB69",
                },
                {
                  offset: 1,
                  color: "#1D3C3F",
                },
              ]),
            }
          }
      },{
        value: 17,
        name: '油菜',
        itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#BFCED2",
                },
                {
                  offset: 1,
                  color: "#2C4F4A",
                },
              ]),
            }
          }
      },{
        value: 11,
        name: '其他',
        itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#58D7C6",
                },
                {
                  offset: 1,
                  color: "#133E4C",
                },
              ]),
            }
          }
      }],
    };
  },
  created() {
    
  },
  methods: {
    initRT() {
      let Chart = this.$refs.areas;
      let myChart = this.$echarts.init(Chart);
      let that = this;
      const option = {
        legend: {
          top: 'center',
          right: '15%',
          // itemHeight: 5,
          // itemWidth: 5,
          orient: 'vertical',
          itemGap: 20,
          textStyle: {
            color: '#ffffff',
            fontSize: '16'
          },
        },
        grid: {
          top: "15%",
          left: "25%",
          bottom: "15%",
        },
        color: ["#37ffeb"],
        tooltip: {
          trigger: "item",
          // formatter: (params) => {
          //   return `${params[0].name} :  ${params[0].value}${this.untils}`;
          // },
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        series: [
          {
            color: ['#05CFF7', '#1978E5', '#EAB966', '#60B45E', '#BECDD0', '#5C6BF6', '#EFC740'],
            name: '报告档案数量',
            type: 'pie',
            radius: ['60%', '90%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left',
            },
            emphasis: {
              label: {
                show: true,
                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: 10px;
  width: 100%;
  height: 100%;
  .area {
    width: 100%;
    height: 100%;
  }
}
</style>
