安装angular,echarts,ngx-echarts
我使用的版本:angular 9 , echarts 4.7.0 , ngx-echarts:4.2.2
代码
angular.json
"scripts": [ "node_modules/echarts/dist/echarts.min.js", "node_modules/echarts/dist/echarts.js" ]
html
<div echarts [options]="getOption()" style="width: 800px;"></div>
ts
ngOnInit() {
this.getOption()
}
getOption() {
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
return option;
}
本文介绍了如何在Angular9项目中安装并使用ECharts4.7.0和ngx-echarts4.2.2进行数据可视化。在`angular.json`中引入了ECharts的脚本,HTML中创建了图表容器,并在TypeScript中定义了图表配置。通过`ngOnInit`和`getOption`方法展示了创建基础柱状图的步骤。
7787

被折叠的 条评论
为什么被折叠?



