0、先上效果圖

?

?

?

1、安裝插件 -- vue項目中

npm install echartsnpm install echarts-wordcloud

?

2、vue頁面中引入組件

<word-cloud-chartid="echarts05":title="chartsTitle[4]":data="echarts05Data":width="width":height="height"/>

?

3、創建組件--WordCloudChart.vue

<template><div :id="id" :class="className" :style="{ height:height,width:width }" /> </template><script> import echarts from "echarts"; import resize from "./mixins/resize"; import "echarts-wordcloud/dist/echarts-wordcloud"; import "echarts-wordcloud/dist/echarts-wordcloud.min";export default {mixins: [resize],props: {className: {type: String,default: "chart"},id: {type: String,default: "chart"},width: {type: String,default: "100%"},height: {type: String,default: "400px"},data: {type: Array,default: []},title: {type: String,default: ""}},data() {return {chart: null};},mounted() {this.initChart();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {this.chart = echarts.init(document.getElementById(this.id));const option = {title: {text: this.title,x: "center"},backgroundColor: "#fff",// tooltip: {// pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"// }, series: [{type: "wordCloud",//用來調整詞之間的距離gridSize: 10,//用來調整字的大小范圍// Text size range which the value in data will be mapped to.// Default to have minimum 12px and maximum 60px size.sizeRange: [14, 60],// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45//用來調整詞的旋轉方向，，[0,0]--代表著沒有角度，也就是詞為水平方向，需要設置角度參考注釋內容// rotationRange: [-45, 0, 45, 90],// rotationRange: [ 0,90],rotationRange: [0, 0],//隨機生成字體顏色// maskImage: maskImage, textStyle: {normal: {color: function() {return ("rgb(" +Math.round(Math.random() * 255) +", " +Math.round(Math.random() * 255) +", " +Math.round(Math.random() * 255) +")");}}},//位置相關設置// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud// Default to be put in the center and has 75% x 80% size.left: "center",top: "center",right: null,bottom: null,width: "200%",height: "200%",//數據data: this.data}]};this.chart.setOption(option);}} }; </script> <style lang='scss' scoped> .chartsClass {padding-left: 1.2rem; } </style>

?

data數據如下：內容太多了，刪掉了一部分

echarts05Data: [{name: "十九大精神",value: 15000},{name: "兩學一做",value: 10081},{name: "中華民族",value: 9386},{name: "馬克思主義",value: 7500},{name: "民族復興",value: 7500},{name: "社會主義制度",value: 6500},{name: "國防白皮書",value: 6500},{name: "創新",value: 6000},{name: "民主革命",value: 4500},{name: "文化強國",value: 3800},{name: "國家主權",value: 3000},{name: "武裝顛覆",value: 2500},{name: "領土完整",value: 2300},{name: "安全",value: 2000},{name: "從嚴治黨",value: 1900},{name: "現代化經濟體系",value: 1800},{name: "國防動員",value: 1700},{name: "信息化戰爭",value: 1600},{name: "局部戰爭",value: 1500},{name: "教育",value: 1200},{name: "職業教育",value: 1100},{name: "兵法",value: 900},{name: "一國兩制",value: 800},{name: "特色社會主義思想",value: 700},]

　　

轉載于:https://www.cnblogs.com/slightFly/p/11573390.html

總結

以上是生活随笔為你收集整理的vue项目中使用echarts实现词云的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。