在中,查詢到有兩種方法來實現詞雲圖,分別是echarts 和 highcharts

Echarts:

注意,wordcloud對應的echarts版本有要求:echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

需要下載echarts 和 wordcloud,全域性註冊引用echarts

	npm install echarts@5
	npm install echarts-wordcloud@2

<div class="cloud-wrap">
    <div ref="cloudEl" class="cloud-box"></div>
</div>
<style>
.cloud-wrap {
    width: 100%;
    height: 100%;
}
 .cloud-box {
     width: 100%;
     height: 100%;
 }
</style>
<script>
import wordcloud from 'echarts-wordcloud';
export default {
	data() {
		return {
			words:[{
				id:1,content:'name'
			}],bgImg:'base64格式,底色為白色',}
	},mounted() {
      this.drawCloud(this.$refs.cloudEl,this.words);
  	},methods:{
	  	drawCloud(wrapEl,data) {
	        // let maskImage = new Image(); //可以根據圖片形狀生成有形狀的詞雲圖
	        // maskImage.src= this.bgImg;
	        let list = this.wordCloudData.map((item) => ({
	            name: item.content,value: item.id
	        }))
	        if(list.length == 0){
	            list = [{name:'無',value:50}]
	        }
	        let myChart = echarts.init(wrapEl);
	        let option = 
	        {
	            tooltip: {
	                show: true,},// backgroundColor:'#fff',// 畫布背景色
	            series: [
	            {
	                name: "熱詞",type: "wordCloud",// maskImage: maskImage,// 圖片形狀
	                keepAspect: false,sizeRange: [10,40],//畫布範圍，如果設定太大會出現少詞（溢位螢幕）
	                rotationRange: [0,0],//資料翻轉範圍
	                // shape: "circle",// drawOutOfBound: true,// 超出畫布的詞彙是否隱藏
	                drawOutOfBound: false,color:"#fff",left: "center",top: "center",right: null,bottom: null,// width: "100%",height: "100%",gridSize: 8,textPadding: 10,autoSize: {
	                    enable: true,minSize: 6,textStyle: {
	                    normal: {
	                        fontFamily: 'sans-serif',fontWeight: 'bold',color:"#333",// 字型顏色
	                        // colo
 
r: function () { // 字型顏色
	                        //     return 'rgb(' + [
	                        //         Math.round(Math.random() * 160),//         Math.round(Math.random() * 160),//         Math.round(Math.random() * 160)
	                        //     ].join(',') + ')';
	                        // },emphasis: {
	                        // focus: 'self',textStyle:{
	                            shadowBlur: 10,shadowColor: "#333",}
	                    },data: list,],};
	        // maskImage.onload = function() {
	            myChart.setOption(option,true)
	        // };
	    },}
}
</script>

無遮罩層的詞雲圖↑www.cppcns.com

有遮罩層的詞雲圖↑

Highcharts

下載包

npm install [email protected]

<div class="cloud-wrap">
    <div id="container" style="width: 100%;height: 100%;"></div>
</div>
<style>
	// 同上
</style>
<script>
import Highcharts from 'highcharts'
export default {
	data() {
		return {
			words:[{
				id:1,mounted() {
      this.dealData();
  	},methods:{
	    dealData(){
	        let data = this.words.map((item,index) => ({
	            name: item.content,value: item.id,//weight: Math.floor(Math.random()*3+1)
	            //控制加粗,隨機數取1~3,若需要按照介面返回的順序,可不隨機
	            weight: item.id*100 
	        }))
	        this.drawPic(data)
	    },drawPic(data){
	        Highcharts.chart('container',{
	            //highcharts logo
	            credits: { enabled: false },//匯出
	            exporting: { enabled: false },//提示關閉
	            tooltip: { enabled: false },//顏色配置
	            colors:[
	                '#ffffff'
	                //,'#00c0d7','#2594ce','#de4c85',// '#ff7f46','#ffb310','#e25c52'
	            ],//圖形配置
	            chart: {
	                // spacingBottom: 15,// spacingTop: 12,spacingLeft: 5,spacingRight: 5,backgroundColor: "rgba(255,255,0)",series: [{
	       rhoAiKTBTF
 
         type: "wordcloud",// 型別
	                data: data,rotation: 90,//字型不旋轉
	                maxFontSize: 40,//最大字型
	                minFontSize: 14,//最小字型
	                style: {
	                    fontFamily: "sans-serif",fontWeight: '500'
	                }
	            }],});
	    },}
}
</script>

echarts 和 highcharts 都可以在vue中實現詞雲圖. 但是如果使用echarts的話,需要當前的echawww.cppcns.comrts進行升級或降級才能實現字型多顏色,而highcharts則不需要. 自定義形狀highcharts暫時還沒探究,需要的可以自行查詢,以後有機會的話我也會看看.

到此這篇關於vue中使用詞雲圖的文章就介紹到這了,更多相關vue中使用詞雲圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！