效果

安装

在vue项目中安装echarts和词云
npm install echarts npm install echarts-wordcloud
引入echarts和词云

main.js中加入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
创建一个vuewordcloud.vue

这个名字任意取哈

指定一个div
<template> <div id="mywordcloud" :style="{width: '100%', height: '300px'}"
:data="worddata"></div> </template> <script> import echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud"; import
"echarts-wordcloud/dist/echarts-wordcloud.min"; export default { name:
"VueWordCloud", data () { return { msg: 'Welcome to Your Vue.js App', worddata:
[ { 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 }, ] } }, mounted(){
this.initChart(); }, methods: { initChart() { this.chart =
echarts.init(document.getElementById("mywordcloud")); console.log('lll'); const
option = { title: { text: "热爱祖国", 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.worddata } ] };
this.chart.setOption(option); }, } } </script>
 

技术
©2019-2020 Toolsou All rights reserved,
vue项目中使用本地静态JS数据文件利用克鲁斯卡尔算法求最小生成树C++ 移动构造函数和拷贝构造函数华为鸿蒙 HarmonyOS 2 正式发布VS添加动态链接库的两种方法python_樱花树Jmeter配置元件之HTTP授权管理器与 HTTP缓存管理器-19vue+element-ui里面table组件多选框实现批量操作RISC-V指令集架构特点及其总结js实现上下文菜单