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');

require('echarts-wordcloud');

​

、

5、提示事项

由于echarts-wordcloud官方demo已经很久没有更新了，使用echarts4.x配置echarts-wordcloud的时候，很多人反馈字体没有颜色。

解决办法是：用textStyle 代替 itemStyle 属性。

textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            }

参考资料：

https://www.npmjs.com/package/echarts-wordcloud