# 饼图(pie)示例1

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
  // 提示框组件：鼠标移到每个数据上，鼠标hover 显示的悬浮框
  tooltip: {
    trigger: 'none' // 设置不显示 hover悬浮框
  },
  // 项目标题显示设置: 在底部居中显示
  legend: { bottom: '5%', left: 'center' },
  color: ['#5da2f9', '#f1f2f5'], // 每个series 的 item颜色设置
  series: [
    {
      name: '虚拟VCPU计量',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      // 饼图圆角 有间隙样式
      itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
      // 每个数据的label不显示
      label: { show: false, position: 'center' },
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold',
          formatter: '{bStyle|{b}}\n {d}%',
          rich: { bStyle: { color: '#ccc', fontSize: 20 } }, // formatter中的样式
        }
      },
      labelLine: { show: false },
      data: [
        { value: 28, name: '已用' },
        { value: 70, name: '可用' }
      ]
    }
  ]
};
option && myChart.setOption(option);