# 饼图(pie)示例

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%'],
      center: ['50%', '40%'], // 修改 饼图 显示位置。将饼图向上移动。后添加的属性，示例里面没有这个属性
      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);

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  // 整个容器的背景色
  backgroundColor: '#fff',
  // 中间标题
  title: {
    text: '环形饼图',
    left: 'center',
    top: 'center',
    textStyle: {
      fontSize: 20,
      color: '#333'
    }
  },
  // 提示框样式
  tooltip: {
    trigger: 'item',
    backgroundColor: '#000', // 弹窗背景黑色
    textStyle: {
      color: '#fff' // 文字白色
    }
  },
  // 项目标题显示设置: 在底部居中显示
  legend: { bottom: '0', left: 'center' },
  // 数据颜色
  color: ['#b8741a', '#7f7f7f'],
  series: [
    // 最底层透明边框环
    {
      type: 'pie',
      radius: ['86%', '87%'], // 控制边框环宽度和位置
      // 设置饼图在容器中的位置：[水平位置， 垂直位置]
      center: ['50%', '45%'],
      data: [{ value: 100, itemStyle: { color: 'rgba(0, 0, 0, 0.05)' } }],
      label: { show: false },
      silent: true, // 禁止交互
      z: 1
    },
    // 主圆环图：两个数据块
    {
      name: '环形饼图',
      type: 'pie',
      radius: ['50%', '75%'], // 控制主环厚度
      // 设置饼图在容器中的位置：[水平位置， 垂直位置]
      center: ['50%', '45%'],
      data: [
        {
          value: 13000,
          name: '剩余'
          // itemStyle: {
          //   color: '#b8741a'
          // }
        },
        {
          value: 18000,
          name: '已分配'
          // itemStyle: {
          //   color: '#7f7f7f'
          // }
        }
      ],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      z: 2
    },
    // 第二个圆环（用于 A 更粗）——通过叠加实现
    {
      name: '环形饼图',
      type: 'pie',
      radius: ['50%', '80%'], // 比上面更厚
      // 设置饼图在容器中的位置：[水平位置， 垂直位置]
      center: ['50%', '45%'],
      data: [
        {
          value: 13000,
          name: '剩余'
          // itemStyle: {
          //   color: '#b8741a'
          // }
        },
        {
          value: 18000,
          name: '已分配',
          itemStyle: {
            color: 'transparent'
          }
        }
      ],
      label: { show: false },
      labelLine: { show: false },
      z: 3
    }
  ]
};

option && myChart.setOption(option);