angular6项目中使用echarts图表的方法(有一个坑,引用报错)
Posted Pearl_Ran
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular6项目中使用echarts图表的方法(有一个坑,引用报错)相关的知识,希望对你有一定的参考价值。
1、安装相关依赖(采用的webpack)
npm install ecahrts --save
npm install ngx-echarts --save
2、angular.json 配置echarts路径
"scripts": [
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/map/js/china.js",
"node_modules/echarts/dist/extension/bmap.js"
]
3*、module文件中导入NgxEchartsModule模块,一般都是全局使用,放到项目中的共有模块中,因为并不是其他的每个模块都会用到echarts,所以放到app.module.ts文件下并不是最佳的实践方式。在项目中单独创建一个共享shared.module,在使用的component中引用即可。但是,使用公共module时,必须加入exports中,否则报错!
/**share.module.ts**/ import {NgxEchartsModule} from \'ngx-echarts\'; ... imports: [ ..., NgxEchartsModule, ... ], exports: [ ..., NgxEchartsModule , ... ]
4、
在对应的模板文件中如此使用
options = { title: { text: \'ECharts 入门示例\' }, tooltip: {}, xAxis: { data: [\'衬衫\', \'羊毛衫\', \'雪纺衫\', \'裤子\', \'高跟鞋\', \'袜子\'] }, yAxis: {}, series: [{ name: \'销量\', type: \'bar\', data: [5, 20, 36, 10, 10, 20] }] }
<div echarts [options]="options" class="main-chart"></div>
以上是关于angular6项目中使用echarts图表的方法(有一个坑,引用报错)的主要内容,如果未能解决你的问题,请参考以下文章