环形饼图——基本案例

效果图：

 

 代码：
 

import * as echarts from 'echarts';

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

option = {
  title: {
    text: '总支出',
    subtext: '1000',
    left: 'center',
    top: '47%',
    zlevel: 1
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    // orient: 'vertical',
    left: 'center',
    bottom: '0'
  },
  series: [
    {
      name: '支出',
      type: 'pie',
      radius: ['50%', '70%'],//内环与外环的大小
      data: [
        { value: 100, name: '衣服：10%' },
        { value: 200, name: '家具：20%' },
        { value: 300, name: '车贷：30%' },
        { value: 350, name: '房贷：35%' },
        { value: 50, name: '伙食：5%' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);