echarts实现环形图

前端框架使用的angular，使用echarts实现环形图

1. item.component.html

<div id="box1" class="pie"></div>
<div id="box2" class="pie"></div>

2. item.component.css

.pie {
    width:160px;
    height:160px;
    margin: 0 auto;
}

3. item.component.ts

ngAfterViewInit() {
      this.pie(11, '合格率', '#box1', ['#E91E63', '#F48FB1']);
      this.pie(54, '正确率', '#box2', ['#2196F3', '#BBDEFB']);

  }
pie(pieData: any, pieName: string, box: string, colors: string[] ): void {
    const that = this;
    const myChart = echarts.init(that.element.nativeElement.querySelector(box));
    const data = pieData;
    const name = pieName;
    const option = {
        grid: {
            top: 5,
            bottom: 5,
        },
        color: colors,
        series: [{
            name: 'valueOfMarket',
            type: 'pie',
            center: ['50%', '50%'], // 饼图的圆心坐标
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: { //  饼图图形上的文本标签
                normal: { // normal 是图形在默认状态下的样式
                    show: true,
                    position: 'center',
                    color: '#000000',
                    fontSize: 14,
                    fontWeight: 'bold',
                    formatter: '{b}\n{c}%' // {b}:数据名； {c}：数据值； {d}：百分比
                }
            },
            data: [
                {
                    value: data,
                    name: name,
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                {
                    value: 100 - data,
                    name: '',
                    label: {
                        normal: {
                        show: false
                        }
                    }
                }
            ]
        }]
    }
    myChart.setOption(option);
}

实现效果如图：

转载于:https://www.cnblogs.com/zeroingToOne/p/9220325.html