The use of word cloud in Vue

Time:2021-12-29

1、 Echarts, wordcloud version
After installation, install in package View in JSON
The use of word cloud in Vue
2、 Renderings
The use of word cloud in Vue
3、 Code
Because each word cloud in the UI diagram only gives two random colors, prepare the random colors first.
Before the interface review, let the back end process the data into this format:
const data = [
{Name: ‘sleep’, value: 1228},
{Name: ‘play mobile’, value: 981},
{Name: ‘eat’, value: 363},
……
]Or process the background data in this format
1. / / initialize two word clouds

initWord() {
  const chartDom1 = document.getElementById('behaviorAnalysis')
  const chartDom2 = document.getElementById('moodAnalysis')
  if (chartDom1 && chartDom2) {
    const myChart1 = echarts.init(chartDom1)
    const myChart2 = echarts.init(chartDom2)
    const arr1 = ['rgb(135,206,201)', 'rgb(240,194,110)']
    const arr2 = ['rgb(187,180,255)', 'rgb(223,141,131)']
    this.actionData = this.formatteData(this.actionData, arr1)
    this.moodData = this.formatteData(this.moodData, arr2)
    myChart1.setOption({ series: this.setWordOption(this.actionData) })
    myChart2.setOption({ series: this.setWordOption(this.moodData) })
  }
},

2. / / add TextStyle attribute to data and a random color

formatteData(data, colorArray) {
  //Add TextStyle to each item in the array
  const cloudData = data.map(val => ({
    ...val,
    //Color do not wrap with normal, otherwise the color will not take effect
    textStyle: {
      // normal: {
      color: this.randomColor(colorArray)
      // }
    }
  }))
  // console.log('cloudData', this.cloudData)
  return cloudData
},

3. Random color function

randomColor(colorArray) {
  //Two colors of classroom behavior analysis
  const arr = colorArray
  Return arr [math. Round (math. Random() * (arr. Length - 1))] // take one color at random

  //If the color is not fixed, you can use the following random colors
  // return 'rgb(' + [
  //   Math.round(Math.random() * 160),
  //   Math.round(Math.random() * 160),
  //   Math.round(Math.random() * 160)
  // ].join(',') + ')'

},
4. Configuration function

setWordOption(words) {
  // const data = words
  const data = words
  // console.log(data, 'setWordOption data----')
  const option = [{
    type: 'wordCloud',
    shape: 'diamond',
    left: 'center',
    top: 'center',
    right: null,
    bottom: null,
    width: '100%',
    height: '90%',
    sizeRange: [18, 30],
    rotationRange: [0, 0], 
    rotationStep: 45,
    gridSize: 25,
    drawOutOfBound: false,
    textStyle: {
      // normal: {
      fontFamily: 'PingFangSC-Regular, PingFang SC',
      fontWeight: 'normal'
      // },
    },
    Data // this data is the array after adding TextStyle
  }]
  return option
},
//Configuration Description:
  Shape: the shape of the word cloud. The default is circle. The optional parameters are cardioid, diamond, triangle forward, triangle and star.
  Left top right bottom: the location of the word cloud. The default is center.
  Width height: the width and height of the word cloud. The default is 75% and 80%.
  Sizerange: the text size range of the word cloud. The default is [12,60]. The word cloud will render the text size according to the value of the original data. Take the default value as an example. The minimum rendering value is 12px and the maximum rendering value is 60px. The value in the middle is calculated proportionally.
  Rotationrange rotationstep: the angle of the text in the word cloud. The text in the word cloud will rotate randomly within the rotationrange. The gradient rendered is rotationstep. The smaller this value is, the more kinds of angles will appear in the word cloud. Taking the above parameters as an example, the possible rotation angle is - 90 - 45 0 45 90.
  Gridsize: the spacing of each word in the word cloud.
  Drawoutofbound: whether to allow word clouds to be rendered outside the boundary, you can directly use the default parameter false, otherwise it is easy to cause word overlap.
  TextStyle: the text style in the word cloud. Normal is the initial style, and emphasis is the style when the mouse moves over the text

4、 Read official documents

On node_ Read the official readme configuration file in the modules Directory:

The use of word cloud in Vue
Since this article was referred to earlier:https://segmentfault.com/a/11…, there is a normal package under its TextStyle, but there is no official document, so the font color does not take effect. It takes effect only after it is removed.

Recommended Today

String s = new string (“XXX”); how many objects are created?

introduction I went to the interview on Friday and was asked a dumb question Interviewer: String s = new string (“XXX”); How many objects were created?Me: two?Interviewer: which two?I:… (mute) Before that, I only knew that there were two. As for why there were two, I didn’t know. analysis //In constant pool String str1 = […]