前端框架使用的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}
{c}%' // {b}:數據名； {c}：數據值； ozvdkddzhkzd：百分比
                }
            },
            data: [
                {
                    value: data,
                    name: name,
                    label: {
                        normal: {
                            show: true
                        }
                    }
                },
                {
                    value: 100 - data,
                    name: '',
                    label: {
                        normal: {
                        show: false
                        }
                    }
                }
            ]
        }]
    }
    myChart.setOption(option);
}

實現效果如圖：

總結

以上是生活随笔為你收集整理的echarts实现环形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。