<template>
      <div id="cpu" style="width: 270px;height: 200px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
    export default {
      name: "show",
      methods:{
          aucDrawLine() {
            // 基于準備好的dom，初始化echarts實例，所以只能在mounted中調(diào)用
            // 這里'auc'是自己取的名字，跟div標簽屬性的id后面的值是一一對應(yīng)的
            let myChart = echarts.init(document.getElementById('cpu'));
            // 繪制圖表
            myChart.setOption( {
              title: {
                text: 'CPU使用率', // 標題名
                // 標題的樣式
                textStyle: {
                  color: '#888', // 字體顏色
                  fontFamily: 'Microsoft YaHei', // 字體
                  fontSize: 20,
                  fontWeight: '400',
                  align: 'center', // 文字的水平方式
                },
                left: 'center', // 定位
                top: '5%'
              },
              series: [{
                type: 'liquidFill',
                radius: '60%',
                waveAnimation: true,
                data: [{
                  value: 0.5,
                  direction: 'left',
                  itemStyle: {
                    normal: {
                      color: '#7DCEA0'
                    }
                  }
                },
                  {
                    value: 0.45,
                    direction: 'right',
                    itemStyle: {
                      normal: {
                        color: '#52BE80 '
                      }
                    }
                  },
                ],
                outline: {
                  show: true,
                  borderDistance: 5, // 邊框線與圖表的距離 數(shù)字
                  itemStyle: {
                    opacity: 0.9, // 邊框的透明度   默認為 1
                    borderWidth: 2, // 邊框的寬度
                    shadowBlur: 14, // 邊框的陰影范圍 一旦設(shè)置了內(nèi)外都有陰影
                    shadowColor: "#fff", // 邊框的陰影顏色,
                    borderColor:'#3AA66E' // 邊框顏色
                  }
                },
                itemStyle: {
                  opacity: 0.9, // 波浪的透明度
                  shadowBlur: 0 // 波浪的陰影范圍
                },
                backgroundStyle: {
                  color: '#fff' // 圖表的背景顏色
                },
                label: { // 數(shù)據(jù)展示樣式
                  show: true,
                  color: '#888',
                  insideColor: '#fff',
                  fontSize: 24,
                  fontWeight: 400,
                },

              }]
            })
          },
        },
      mounted() {
        this.aucDrawLine();
      },
    }
</script>