echarts-wordcloud词云

这篇具有很好参考价值的文章主要介绍了echarts-wordcloud词云。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

echarts-wordcloud是基于echarts的一个插件,所以我们要首先安装echarts包,然后再安装echarts-wordcloud的包,这里我的练习项目安装的版本;当然,你可以随意安装你需要的版本;

“echarts”: “^5.3.3”,
“echarts-wordcloud”: “^2.0.0”,

npm install echarts@5.3.3
npm install echarts-wordcloud@2.0.0

基本配置详解

词库云的使用方式其实跟echart组件是一样的,也是首先需要一个容器,然后对其进行配置,我们先来看一下他的一下配置项,最后我们再把详细的使用方法以及代码展示出来;

var chart = echarts.init(document.getElementById('main'));
 
chart.setOption({
    ...
    series: [{
        type: 'wordCloud',
        
        /*要绘制的“云”的形状。可以是为回调函数,或一个关键字。
        可用的形状有(circle)圆形(默认)、(cardioid)心形,(diamond)菱形,(triangle-forward)三角形向前,(triangle)三角形,(pentagon)五边形和(star)星形。*/
        shape: 'circle',
        
        //保持maskImage的宽高比或1:1的形状,他的选项是支持从echarts-wordcloud@2.1.0
        keepAspect: false,
 
        //一个轮廓图像,其白色区域将被排除在绘制文本之外
        //意思就是可以通过图片,来自定义词云的形状
        maskImage: maskImage,
 
       //设置显示区域的位置以及大小
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        width: '70%',
        height: '80%',
 
        //数据中的值将映射到的文本大小范围。默认大小为最小12px,最大60px。
        sizeRange: [12, 60],
 
       //文本旋转范围和步进度。文本将通过rotationStep:45在[- 90,90]范围内随机旋转
        rotationRange: [-90, 90],
        rotationStep: 45,
 
		//以像素为单位的网格大小,用于标记画布的可用性
		//网格尺寸越大,单词之间的间距越大。
        gridSize: 8,
 
         //设置为true,允许文字部分在画布外绘制。
        //允许绘制大于画布大小的单词
        //从echarts-wordcloud@2.1.0开始支持此选项
        drawOutOfBound: false,
 
        //如果字体太大而无法显示文本,
        //是否收缩文本。如果将其设置为false,则文本将不渲染。如果设置为true,则文本将被缩小。
        //从echarts-wordcloud@2.1.0开始支持此选项
        shrinkToFit: false,
 
        // 执行布局动画。当有大量的单词时,关闭它会导致UI阻塞。
        layoutAnimation: true,
 
        //全局文本样式
        textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color可以是一个回调函数或一个颜色字符串
            color: function () {
                // Random color
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
            }
        },
        emphasis: {
            focus: 'self',
 
            textStyle: {
                textShadowBlur: 10,
                textShadowColor: '#333'
            }
        },
 
       //数据是一个数组。每个数组项必须具有名称和值属性。
        data: [
	        {
	            name: 'Farrah Abraham',
	            value: 366,
	            //单个文本的样式
	            textStyle: {}
	        }
        ]
    }]
});
 

具体使用步骤

1.首先在项目中引入
import * as echarts from 'echarts';
import 'echarts-wordcloud';
2.在需要使用词库云的组件写一个div容器
<div id="myEchart"></div>
3.设置配置项
export default {
    mounted(){
       this. initEchart()
    },
    methods:{
        initEchart(){
           const echartDom = document.getElementById('myEchart')
           const myChart = echarts.init(echartDom)
           const option  = {
                series: [{
                type: 'wordCloud',
                shape: 'circle',
                keepAspect: false,
               // maskImage: maskImage,
                left: 'center',
                top: 'center',
                width: '100%',
                height: '90%',
                right: null,
                bottom: null,
                sizeRange: [12, 60],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 8,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    // focus: 'self',
                    textStyle: {
                        textShadowBlur: 3,
                        textShadowColor: '#333'
                    }
                },
                //data属性中的value值却大,权重就却大,展示字体就却大
                data: [
                    {name: 'Farrah',value: 366},
                    {name: "汽车",value: 900},
                    {name: "视频",value: 606},
                    ...
                ]
            }]
 
           }
           option && myChart.setOption(option)
 
           //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
    }
}
4.效果图展示

echarts-wordcloud词云,echarts,前端,javascript文章来源地址https://www.toymoban.com/news/detail-814120.html

到了这里,关于echarts-wordcloud词云的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python安装词云库wordcloud一文搞懂

    使用pip install wordcloud命令安装词云时,失败概率极大,因此词云库一般使用whl文件进行安装。 whl安装词云库步骤如下(同样适合安装其他whl文件的库) 1.下载wordcloud的whl文件 下载地址为:https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud 2.选择合适的whl版本(重点) 很多人不知道下载哪个版

    2024年02月05日
    浏览(34)
  • 通过Python的wordcloud库将单词生成词云(心形形状)

    大家好,我是空空star,本篇给大家分享一下通过Python的wordcloud库将单词生成 词云(心形形状) 。 Python的wordcloud库是一个用于生成词云的Python包。它可以将一段文本中出现频率高的单词按其出现频率大小以及颜色深浅排列成一个词云图形,从而更好地展示文本中的信息。 使用

    2024年02月05日
    浏览(39)
  • 让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud)

    词云Word Cloud的制作方法(基于python) 本文目录: 一、词云的简介 二、 实现原理和流程 1、制作词云流程图 2、词云实现原理 三、 实现词云的方式 1、安装词云相关模块库 2、WordCloud库 3、stylecloud库 四、总结 词云,又称文字云,英文名:Word Cloud。是文本数据的视觉表示形式。

    2023年04月09日
    浏览(45)
  • echarts如何实现词云

    echarts如何实现词云 笔者需要使用echarts实现词云,但是echarts官网并没有提供关于词云的实现代码 1、游览器搜索https://github.com/ecomfe/echarts-wordcloud 2、该项目提供了详细的使用说明以及使用示例 https://github.com/ecomfe/echarts-wordcloud

    2024年02月11日
    浏览(35)
  • 电影Top250数据分析可视化,应用Python爬虫,Flask框架,Echarts,WordCloud

    目录 一:项目概述 二:模块实现 2.1 Python爬虫的技术实现 2.1.1 爬取网页,获取数据 2.1.2 解析内容 2.1.3 保存数据 2.2 数据可视化 2.2.1 Flask框架 2.2.2 首页和电影页(表格) 2.2.3 使用Echarts呈现电影评分分布图 2.2.4 jieba分词,WordCloud生成“词云” 本项目运用 Python爬取电影To

    2024年02月04日
    浏览(57)
  • 【ECharts】从零实现echarts地图完整代码(纯前端,包含地图资源)

    这里忽略创建vue项目的操作过程,请自行搭建 vue2 项目 、 less 环境 安装下载 echarts 这里我们选择npm下载 安装成功后,在 main.js 中把echarts配置到this上 这里我建立了一个地图的组件,放在 hnMap 中 获取地图渲染json文件 这里我是通过下述的网址下载需要的地图 json 文件到本地

    2024年02月03日
    浏览(53)
  • Echarts前端可视化库使用教程

    ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 官网:https://echarts.apache.org/zh/inde

    2024年02月10日
    浏览(48)
  • 前端-如何用echarts绘制含有多个分层的波形图

    先展示一下实际的效果图 用户选择完需要的波形参数字段之后,页面开始渲染图表,有几个参数就要渲染几个grid,也就是几行波形。 拿到所选的参数数据之后 1.首先是给横坐标轴的里程-数据注入 2.修改tooltip(跟着竖线走的卡片弹窗)里面的弹出窗的显示,需要返回html模板

    2024年02月01日
    浏览(42)
  • 前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作

    效果图如下:    代码如下: 运行3D项目要安装一下echarts-gl依赖: 引入的jiangsu文件要单独下载json文件,附上两个网址: DataV.GeoAtlas地理小工具系列 POI数据|高德POI|高德兴趣点|高德POI数据|高德POI下载|高德POI数据库|高德POI分类|高德北京市POI|高德上海市POI|高德广州市POI|高德

    2024年02月11日
    浏览(43)
  • VUE 实现 3D词云 旋转词云效果

     效果视频: 3D词云

    2024年02月05日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包