<template>
  <!-- 100 -->
    <div class="login_container">
     
  
  
      <!-- <div class="card-bx">
               
               <div class="card-cont">
                   <div id="chartPie1"  style="width: 100%;height:280px;"></div>
               </div>
               
            </div> -->
        
    </div>
  </template> 
  
  <script>
  import {   ajaxDataPost } from '@/api/common'
  import * as echarts from 'echarts';
  
  //  require('echarts/theme/macarons')
  export default {
    data() {
      return {
         //图表请求参数
        chart1: {
          getdataListParm: {
            name: 'getChart1ByHomepage',
            page: 1,
            offset: 1,
            pagecount: '',
            returntype: 'Map',
            parammaps: {
              inputDatetime: '',
              beginDate: '',
              endDate: '',
          
            }
          }
        },
        //图表实例
        chartPie1: null,
        //图表数据
        chartPie1_data: {
          monthdate:['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          arr1:[22, 22, 22, 2, 22, 22, 55],
          arr2:[33, 11, 44, 55, 90, 230, 55],
         
        },
      }
    },
  
    created(){
    
    },
    mounted() {
      //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
       // this.roadchartPie1(this.chartPie1_data)
  
   
  
    },
    methods:{
       
      //图表数据加载
      roadchartPie1(chartPie1_data) {
  
        
        if (this.chartPie1 != null) {
          this.chartPie1.dispose()
        }
  
        console.log(echarts)
        this.chartPie1 = echarts.init(document.getElementById('chartPie1'))
        var option = {
          title: [
            { subtext: '犊牛总数', left: '16.67%',  top: '75%', textAlign: 'center' },
            { subtext: '公犊牛', left: '50%', top: '75%',  textAlign: 'center' },
            { subtext: '母犊牛', left: '83.33%', top: '75%', textAlign: 'center' }
          ],
          series: [
            {
              type: 'pie',radius: '25%',radius: ['50%', '70%'],
              data: [
                { name: '犊牛总数', value: 2300 },
              ],
              itemStyle: { color: '#fac229'},
              label: {formatter: '{c}',position: 'center', fontSize: 20 },
              left: 0,right: '66.6667%',top: 0, bottom: 0
            },
            {
              type: 'pie', radius: '25%', radius: ['50%', '70%'],
              data: [
                { name: '公犊牛', value: 928, itemStyle: { color: '#6af7a4'},label: {formatter: '{c}',position: 'center', fontSize: 20 }},
                { name: '', value: 2700, itemStyle: { color: '#104658'},label: {formatter: ' ',position: 'center', fontSize: 20}},
              ],
              left: '33.3333%',right: '33.3333%', top: 0,bottom: 0
            },
            {
              type: 'pie',radius: '25%',radius: ['50%', '70%'],
              data: [
                { name: '母犊牛', value: 1372,itemStyle: { color: '#6cd6fc'},label: {formatter: '{c}',position: 'center', fontSize: 20 }},
                { name: '', value: 400,itemStyle: { color: '#093580'},label: {formatter: ' ',position: 'center', fontSize: 20 } },
              ],    
              left: '66.6667%', right: 0,  top: 0, bottom: 0
            }
          ]
        }
     
        
        this.chartPie1.setOption(option)
        window.onresize = function () {
          this.chartPie1.resize()
        }
      },
      
     
    }
  }
  </script>
  <!-- 加了scoped，则是仅在此组件里生效 -->
  <style scoped> 
  </style>
  