echarts官网虽然展示了wordcloud的demo和源码，但是在将代码引入vue项目中会报两种错误，目前网上针对此两种问题的解决方案不是很多，并且都不能解决根本性问题，查找起来就浪费了太多时间，得不偿失，所以下面将会阐述我的最终解决方案和必坑方法！
页面最终效果展示
image.png
- 引入echarts
npm install echarts
- man.js引入
import echarts from 'echarts'
- dom使用
// tip: 页面方法中会通过 this.$echarts.init(this.$refs.loginTimes)方法获取到ref绑定为loginTimes的DOM节点，
然后通过echarts的内部机制将echarts视图以canvas的形式展现在页面上
<div ref="loginTimes" class="block-up-login"></div>
- 方法中调用
<script>
export default
mounted() {
// 初始化视图
this.getIint()
},
methods: {
getIint() {
// 获取到ref绑定为loginTimes的DOM节点，以canvas的形式展现在视图层
let myChart = this.$echarts.init(this.$refs.loginTimes)
// echarts参数设置
myChart.setOption({
backgroundColor: '#fff', // canvas背景颜色
// canvas标题配置项
title: {
text: '我是标题',
top: '0%',
left: '-1%',
textStyle: {
fontSize: 14,
color: '#3B3E41',
fontWeight: 'normal'
}
},
series: [
{
type: 'wordCloud',
left: '-5%', // X轴偏移量
top: '20%', // Y轴偏移量
width: '100%', // canvas宽度大小
height: '100%', // canvas高度大小
sizeRange: [12, 50], // 词典字体大小范围配置
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
gridSize: 25, // 词典字体间距配置
layoutAnimation: true, // 为false词典过度会阻塞
textStyle: { // 词典样式配置
normal: {
color() {
// 颜色随机渐变
let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
return colors[parseInt(Math.random() * 10)]
}
}
},
// 渲染词典数据
data: [{
value: '50', // 词典大小配置
name: 'iPhone 13' // 词典名称配置
textStyle: { // 单独配置某个词典样式
shadowBlur: 4,
shadowOffsetY: 14,
color: '#BDBEFA'
}
},
{ value: '30', name: 'VIVO' },
{ value: '29', name: 'OPPO' },
{ value: '28', name: 'HONOR' },
{ value: '27', name: 'iPhone 12 pro max' },
{ value: '26', name: 'iPhone 12 pro max' },
{ value: '25', name: 'HUAWEI MATE 10' },
{ value: '24', name: 'ONEPLUS' },
{ value: '23', name: 'Lenova T470' },
{ value: '22', name: 'MacBook Air ' },
{ value: '21', name: 'SAMSUNG' },
{ value: '20', name: 'iPad mini' },
{ value: '16', name: 'BLACKBERRY' },
{ value: '14', name: 'OPPO' },
{ value: '13', name: 'SAMSUNG' },
{ value: '12', name: '361' },
{ value: '10', name: 'Lenova' }]
}
]
})
}
}
}
</script>
-
此时页面会报错 Component series.wordCloud not exists. Load it first.
image.png
- 报错原因
echarts插件中没有wordCloud依赖包，这是一个坑，虽然官网有阐述，但是位置不醒目，一般根本不知道
tip: 此时如果你百度，会出现很多让你引用第三方js库，也就是echarts-wordcloud.min.js文件，既然项目都安装了echaert，还去引用外部wordclou.js文件，不仅增加了项目的打包体积，更是多此一举，最后报错依旧不能解决，所以一下解决方案重中之重！
- 解决办法
1. 安装 wordCloud 1.0 依赖包
npm install echarts-wordcloud@1
2. man.js 注入
import 'echarts-wordcloud'
tip: 必须安装这个版本，不能执行官网npm install echarts-wordcloud，因为echarts5.0以下的版本使用1.0的词云 默认安装是2.0，否则会报错：
TypeError: babel_runtime_helpers_defineProperty_WEBPACK_IMPORTED_MODULE_0__default(...) is not a function，如图：
image.png
安装完成后，保存项目，刷新页面，你就会发现词云视图就神奇办的出现了！！！
作者：bug爱好者
链接：https://juejin.cn/post/7044809985154351141
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论