uniapp applet—word cloud map

uniapp imports Qiuyun uCharts

Effect picture: two forms

1. Random font color and text size

2. Set the text color to white, and the font size changes according to the parameters

use

1. In the component

<qiun-data-charts
		      type="word"
		      :chartData="chartData"
			  :opts="opts"
			  :pageScrollTop="pageScrollTop"
			  @getIndex="activeWord"
		    />

chartData - word cloud data

opts - word cloud configuration

// 配置
	opts: {
    
    
		 color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		 padding: undefined,
		 extra: {
    
    
		   word: {
    
    
			 type: "normal",
			 autoColors: false
		   }
		 }
	},

pageScrollTop: Bind page scrolling distance in onPageScroll. (There are both page scrolling and scroll-view scrolling. In this case, the value of offsetTop needs to be dynamically passed in as the scrolling distance of the page scroll bar)

Word cloud hits (important):

// 点击词云
	activeWord(e){
    
    
		if(e.currentIndex!=-1){
    
    
			let detail = this.chartData.series[e.currentIndex]
		  // let txt = this.chartData.series.find((item)=>{
    
    
			 //  return item.idx==e.currentIndex
		  // })
		  this.$emit("cloudWord",detail)   返回父级组件被点击的数据
		}
	},

Note: In the real machine test of the WeChat applet, the canvas level will not be affected by the size of the z-index value of other elements. For example, the scene where the bullet box covers the word cloud cannot be realized. It is recommended to use v-if to hide and display the canvas word cloud