angular6使用Echarts插件

angular6使用Echarts插件
1、在angular6项目下，使用npm安装echarts
npm install echarts --save
安装查看angular.json文件，会出现引入了echart.min.js

2、在相应的html文件里面写

<div echarts [options]="chartOption" class="chartDom"></div>

3、在对应的css文件里定义echart图宽和高才能显现图表

.chartDom{
width:100px;
height:100px;
}

4、在对应ts文件里写配置即可

export class AccDashboardComponent implements OnInit {
  tmEchart = {};
ngOnInit() {
	  this.tmEchart = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c}"
                },
                calculable: false,
                series: [
                    {
                        name: '',
                        type: 'treemap',
                        breadcrumb: false,//是否显示面包屑
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: "{b}"
                                },
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
                                name: 'Excess Stock',
                                value: res[1].TOTAL,
                                itemStyle: { normal: { color: '#00B0F0' } },
                                label: { normal: { color: "#000" } }
                            },
                            {
                                name: 'Obsolete Stock',
                                value: res[2].TOTAL,
                                itemStyle: { normal: { color: '#FFFF00' } },
                                label: { normal: { color: "#000" } }
                            },
                            {
                                name: 'Risk Stock',
                                value: res[3].TOTAL,
                                itemStyle: { normal: { color: '#E1140A' } },
                                label: { normal: { color: "#000" } }
                            },
                            {
                                name: 'Healthy Stock',
                                value: res[4].TOTAL,
                                itemStyle: { normal: { color: '#6AC346' } },
                                label: { normal: { color: "#000" } }
                            }
                        ]
                    }
                ]
            };

        })
}
}