Angular6引入配置Echarts4.x使用echarts-wordcloud
1、安装echarts4.x及echarts-wordcloud
npm install echarts
npm install ngx-echarts
npm install echarts-wordcloud
tip:rxjs和rxjs-compat这两个不能少,否则会报object().empty和try-catch错误。
2、从node_modules库中引入js库
angular6版本已经不推荐在angular.json里面引入插件的js库,而在tsconfig.json文件中进行配置
3、装载NgxEchartsModule模块
配全局使用echarts的:
在app.module.ts文件配置
或者有的喜欢share.module.ts配置
import { NgxEchartsModule } from 'ngx-echarts';
配置局部使用echarts:
在使用到echarts的模块下进行配置
4、使用echarts-wordcloud
在使用echarts-wordcloud的组件中初始化的时候引入
ngOnInit() {
require('echarts-wordcloud'); // echarts4.0使用词云的前提必须先加载包
}
因为之前已经全局配置echarts,这里就不用再引入echart插件库了,否则:、
require('echarts-wordcloud');
require('echarts');
5、提示事项
由于echarts-wordcloud官方demo已经很久没有更新了,使用echarts4.x配置echarts-wordcloud的时候,很多人反馈字体没有颜色。
解决办法是:用textStyle 代替 itemStyle 属性。
参考资料:
https://www.npmjs.com/package/echarts-wordcloud