<template>
    <div>
        <el-row :gutter="10" style="margin-bottom:10px">
            <el-card style="color:#409EFF">
                    <div id="main" style="width:1000px; height:800px; margin-left: auto; margin-right: auto;"></div>
                </el-card>
        </el-row>
        <!-- <el-row :gutter="10" style="margin-bottom:10px">
            <el-card style="color:#409EFF">
                    <div id="main" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
                </el-card>
        </el-row> -->
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    name:"Home",
    data(){
        return{
            total:0
        }
    },
    mounted(){       //使用mounted的目的是为了等页面元素渲染之后再触发
    
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const gaugeData = [
  {
    value: 20,
    name: 'Perfect',
    title: {
      offsetCenter: ['0%', '-30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-20%']
    }
  },
  {
    value: 40,
    name: 'Good',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  },
  {
    value: 60,
    name: 'Commonly',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '40%']
    }
  }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#464646'
        }
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'inherit',
        borderColor: 'inherit',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}%'
      }
    }
  ]
};
setInterval(function () {
  gaugeData[0].value = +(Math.random() * 100).toFixed(2);
  gaugeData[1].value = +(Math.random() * 100).toFixed(2);
  gaugeData[2].value = +(Math.random() * 100).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: gaugeData,
        pointer: {
          show: false
        }
      }
    ]
  });
}, 2000);
      
           myChart.setOption(option);
        
    }
}
</script>

<style scoped>

</style>
