angular6使用Echarts插件

最新推荐文章于 2024-05-17 03:29:53 发布

玉面小达摩suki

最新推荐文章于 2024-05-17 03:29:53 发布

阅读量831

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端技术 http web angular 文章标签： angular6 echarts npm

本文链接：https://blog.youkuaiyun.com/qq_33964336/article/details/86510438

web前端技术同时被 3 个专栏收录

18 篇文章

订阅专栏

web

10 篇文章

订阅专栏

http

6 篇文章

订阅专栏

本文详细介绍了如何在Angular6项目中集成Echarts图表插件。从安装Echarts开始，到在HTML文件中添加图表组件，再到CSS样式定义及TS文件中配置图表选项，一步步引导读者完成图表的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

        })
}
}