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;
      }
    }
  ]

版权声明:本文为qq_47246331原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。