新闻链接：Apache ECharts 6.0 震撼发布・前图无量

1、创建一个新的项目

ng new angular-echarts
cd angular-echarts

2、安装依赖

// 目前还是beta版本，安装的时候先过去看看啊
npm i echarts@6.0.0-beta.1

3、创建一个新的组件

ng generate component pieChart

4、编写代码pie-chart.component.ts这里

import {AfterViewInit, Component} from '@angular/core';
import * as echarts from 'echarts/core';
import {TooltipComponent, LegendComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {ECBasicOption} from 'echarts/types/dist/shared';

echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

@Component({
    selector: 'app-test',
    imports: [],
    template: `
        <div id="chartBox" style="width: 500px; height: 500px;"></div>
    `,
    styles: ``
})
export default class PieChart implements AfterViewInit {
    ngAfterViewInit(): void {
        const chartDom = document.getElementById('chartBox');
        const myChart = echarts.init(chartDom);
        let option: ECBasicOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: 'rgba(255,255,255,0.1)',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 1048, name: 'Search Engine'},
                        {value: 735, name: 'Direct'},
                        {value: 580, name: 'Email'},
                        {value: 484, name: 'Union Ads'},
                        {value: 300, name: 'Video Ads'}
                    ]
                }
            ]
        };
        option && myChart.setOption(option);
    }
}

5、启动

ng serve --open

别忘了写路由哈。