做网站搜索如何显示官网,360检测网站开发语言的工具,网络营销型网站建设的内容,威海建设集团网站首页前言 在当今信息爆炸的时代#xff0c;如何从海量的文本数据中提取有用的信息成为了一项重要的任务。词云作为一种直观、易于理解的数据可视化方式#xff0c;被广泛应用于文本分析和可视化领域。本文将介绍一种基于 echarts-wordcloud 实现的词云库#xff0c;通过其丰富的…前言 在当今信息爆炸的时代如何从海量的文本数据中提取有用的信息成为了一项重要的任务。词云作为一种直观、易于理解的数据可视化方式被广泛应用于文本分析和可视化领域。本文将介绍一种基于 echarts-wordcloud 实现的词云库通过其丰富的功能和灵活的定制性帮助用户更好地探索和展示文本数据中的关键信息。 echarts-wordcloud 介绍
echarts-wordcloud 是一种基于 echarts 库实现的词云插件用于生成和展示词云图。echarts 是一款由百度开发的优秀的数据可视化库而 echarts-wordcloud 则是在 echarts 的基础上扩展而来的专门用于处理和展示文本数据中的关键词。词云图是一种以词语频率为基础的可视化方式通过将词语按照频率大小排列并以不同的字体大小、颜色等方式展示直观地呈现出文本数据中的关键信息。echarts-wordcloud 提供了丰富的配置选项可以根据用户的需求进行个性化定制如调整词语的字体大小、颜色、布局方式等以及添加交互功能使用户能够更好地探索和分析文本数据。
一、安装
一共需要安装两个包一个 echarts 基础包另一个是 echarts-wordcloud。
npm install echarts
npm install echarts-wordcloud二、基础使用
创建一个容器在 html 中创建一个 div 元素作为词云图的容器。给该元素指定一个唯一的 id以便后续操作准备数据准备一个包含词语和对应频率的数据集。你可以使用 javaScript 对象或从后端获取的数据确保数据格式正确初始化 echarts 实例在 javaScript 代码中使用 echarts.init() 方法初始化一个 echarts 实例并将其绑定到词云图容器的 id 上配置词云图选项通过配置 echarts 的 option 对象设置词云图的样式、布局和数据。在 option 对象中使用 series 属性来定义词云图的系列类型为 wordCloud并设置相关的配置选项如 shape词云形状、sizeRange词语字体大小范围、rotationRange词语旋转角度范围等。绑定数据将准备好的词语和频率数据绑定到词云图的 series 属性中渲染词云图调用 echarts 实例的 setOption() 方法将配置好的 option 对象传入以渲染词云图显示词云图在页面中显示生成的词云图你可以将词云图容器的样式进行调整以适应你的需求。
完整代码
templatediv classchartBoxdiv idwordChart :style{ width: 100%, height: 100% }/div/div
/template
script
import echarts-wordcloud;
export default {mounted() {this.initEchart();},methods: {initEchart() {var myChart this.$echarts.init(document.getElementById(wordChart));let option {series: [{type: wordCloud, //类型是词云图shape: circle, //词云图的形状为圆形keepAspect: false, //不保持词云图的纵横比//词云图的位置和大小left: center,top: center,width: 100%,height: 100%,right: null,bottom: null,sizeRange: [12, 50], //词云图中词语的字体大小范围最小12px最大60pxrotationRange: [-90, 90], //词云图中词语的旋转角度范围rotationStep: 45, //词云图中词语的旋转步长gridSize: 10, //词云图中词语的间距drawOutOfBound: false, //不绘制超出词云图范围的词语layoutAnimation: true, //开启布局动画//词云图中词语的样式textStyle: {fontWeight: bold,color: function () {return (rgb( [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160),].join(,) ));},},// 词云图中词语的高亮样式emphasis: {textStyle: {textShadowBlur: 2,textShadowColor: orange,},},// 词云图中的数据必须有name和value属性data: [{ name: 无人驾驶, value: 352 },{ name: 区块链, value: 214 },{ name: 云计算, value: 534 },{ name: 物联网, value: 134 },{ name: 虚拟现实, value: 534 },{ name: 增强现实, value: 542 },{ name: 人工智能, value: 242 },{ name: 机器学习, value: 42 },{ name: 深度学习, value: 435 },{ name: 自然语言处理, value: 124 },{ name: 计算机视觉, value: 654 },{ name: 神经网络, value: 232 },{ name: 数据挖掘, value: 324 },{ name: 语音识别, value: 453 },{ name: 图像识别, value: 124 },{ name: 聊天机器人, value: 453 },{ name: 智能家居, value: 233 },{ name: 人脸识别, value: 123 },{ name: 量子计算, value: 212 },{ name: 智能制造, value: 241 },{ name: 语义分割, value: 414 },{ name: 知识图谱, value: 564 },{ name: 增量学习, value: 755 },{ name: 多模态学习, value: 229 },{ name: 迁移学习, value: 233 },{ name: 生成对抗网络, value: 124 },{ name: 强化学习, value: 65 },{ name: 人机交互, value: 199 },{ name: 机器人技术, value: 299 },{ name: 智能音箱, value: 454 },{ name: 智能医疗, value: 365 },{ name: 异常检测, value: 360 },{ name: 时间序列预测, value: 187 },{ name: 推荐系统, value: 360 },{ name: 情感分析, value: 460 },{ name: 机器翻译, value: 480 },{ name: 语音合成, value: 488 },{ name: 人脸生成, value: 51 },{ name: 图像风格转换, value: 99 },{ name: 实例分割, value: 120 },{ name: 目标检测, value: 150 },],},],};myChart.setOption(option);window.addEventListener(resize, function () {myChart.resize();});},},
};
/script
style scoped
.chartBox {width: 50%;height: 50vh;
}
/style实现效果 三、进阶使用
3.1 shape
特殊情况下shape 属性也可以是一个函数用于自定义词云图的形状。当我们需要创建一个非常特殊的形状时可以使用这个函数来实现。
实例代码
shape: function shapeSquare(theta) {return Math.min(1 / Math.abs(Math.cos(theta)),1 / Math.abs(Math.sin(theta)));
},在上面的示例代码中shape 参数被定义为一个函数函数名为 shapeSquare。这个函数接受一个参数 theta表示角度。在函数内部我们使用三角函数余弦和正弦来计算正方形的形状。具体来说我们计算了余弦和正弦的绝对值的倒数并使用 Math.min 方法来取其中较小的值。这样做的目的是确保正方形的边长不会超过 1。通过这个函数我们可以根据给定的角度 theta 来计算正方形的形状。当 theta 的值接近 0 或 180 度时余弦的绝对值会接近 1而正弦的绝对值会接近 0因此正方形的形状会更接近于宽度大于高度的长方形。当 theta 的值接近 90 或 270 度时余弦的绝对值会接近 0而正弦的绝对值会接近 1因此正方形的形状会更接近于高度大于宽度的长方形。
实现效果 3.2 color
在 echarts-wordcloud 中color 是用于配置词云图中词语的颜色的参数。它可以接受不同的取值包括字符串和函数。
字符串你可以直接指定一个颜色字符串如 red、#ff0000 等来设置所有词语的颜色为同一个固定值函数你可以定义一个函数来动态地设置每个词语的颜色。 字符串 textStyle: {color: red,
},实现效果 函数 color: function () {return (rgb( [Math.round(Math.random() * 255),Math.round(Math.random() * 255),Math.round(Math.random() * 255),].join(,) ));
},实现效果 3.2 自定义背景图
在 echarts-wordcloud 中maskImage 参数用于设置词云图的背景图。通过指定一个图片的 url 地址你可以使用自定义的背景图来呈现词云图。以下是一个示例代码展示如何使用 maskImage 参数来设置词云图的背景图
initEchart() {var myChart this.$echarts.init(document.getElementById(wordChart));var maskImage new Image();maskImage.src data:image/png;base64,;let option {series: [{type: wordCloud,shape: circle,maskImage: maskImage,},],};myChart.setOption(option);window.addEventListener(resize, function () {myChart.resize();});
},核心代码 实现效果 相关推荐
⭐ 玩转数据可视化从入门到精通 Echarts
