echarts创建一个环形百分比图

echarts创建一个环形百分比图

效果如图：

实现这样一个环形百分比，基本type是使用的饼状图。
源码如下：

const pieConf = {
  title: {
    text: '40%',
    left: 'center',
    top: 61.5,
    textStyle:{
      color:'#1890fe'
    }
  },
  visualMap: {
    show: false,
  },
  series: [
    {
      type: 'pie',
      //环形显示饼状图，实际上显示的是50-80之间的部分
      //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
      radius: ['50%', '80%'],
      center: ['50%', '50%'],
      data: [   
      //itemSyle是单项的背景颜色设置。
        { value: 60, itemStyle: { color: '#f1f1f1' } },
        { value: 40, itemStyle: { color: '#1890fe' } },
      ],
      label: {
        //将视觉引导图关闭
        show: false,
      },
      itemStyle:{
      	//设置的是每项之间的留白
        borderWidth:7,
        borderColor:'#fff'
      },
      // 初始化echarts的动画效果
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]