The echarts website shows the wordCloud demo and source code, but there are two kinds of errors when introducing the code into the Vue project. Currently there are not many solutions for these two problems, and neither of them can solve the fundamental problem. So here’s my final solution and the inevitable solution!
Page final effect display
1. Introduce the echarts
npm install echarts
Copy the code2. Man. Js
import echarts from 'echarts'
Copy the code3. Use the dom
// tip: This.$echarts.init(this.$refs.loginTimes); <div ref="loginTimes" class="block-up-login"></div>Copy the code4. Call from a method
<script> export default mounted() {this.getiint ()}, methods: {getIint() {// get the DOM node whose ref is bound to loginTimes, Let myChart = this.$echarts.init(this.$refs.loginTimes) // echarts = myChart. BackgroundColor: '# FFF ', // canvas backgroundColor // canvas title configuration item title: {text: 'I am the title ', top: '0%', left: '-1%', textStyle: {fontSize: 14, color: '#3B3E41', fontWeight: 'normal'}}, series: [{type: 'wordCloud', left: '-5%', // X offset top: // canvas size sizeRange: // canvas size sizeRange: [12, 50], // Dictionary font size range configured rotationRange: [0, 0], // dictionary font rotation Angle configured, default not rotated gridSize: 25, // dictionary font spacing configured layoutAnimation: TextStyle: {// Dictionary style configuration normal: {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color() {color(); '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF'] return colors[parseInt(Math.random() * 10)] } } }, // Render dictionary data: [{value: '50', // dictionary size configuration name: 'iPhone 13' // dictionary name configuration textStyle: {// separate configuration of a dictionary style 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>Copy the code5. An error message is displayed
6. Error causes are reported
The echarts plugin does not have a wordCloud dependency package. This is a pitCopy the codetip: At this time, if you search baidu, there will be a lot of third-party JS library, that is, echarts-wordCloud.min. js file, since the project has installed Echaert, but also to reference external wordclou.js file, not only increased the packaging volume of the project, but also unnecessary. The final error still cannot be solved, so the solution is the most important!
7. Solutions
NPM install echarts-wordcloud@1 2. Man.js import 'echarts-wordCloud'Copy the codeNPM install echarts-wordcloud for echarts5.0 or later. If echarts5.0 or later uses the wordcloud 1.0, the default installation will be 2.0.
Once the installation is complete, save the project, refresh the page and you will see the word cloud view magically appear!!