关于Echarts词云图自定义形状如何实现

最新推荐文章于 2025-01-22 11:47:28 发布

Kylin Yang

最新推荐文章于 2025-01-22 11:47:28 发布

阅读量9.4k

点赞数 16

分类专栏： Echarts 文章标签： javascript html html5 前端

本文链接：https://blog.youkuaiyun.com/ammmmaa/article/details/109117474

版权

本文介绍如何使用Echarts实现词云图的自定义形状，包括前期准备和形成步骤。首先，需要将矢量图转换为base64格式，推荐使用阿里巴巴矢量图标库。接着，将base64编码填入代码中，实现词云图展示。通过示例代码和运行效果展示，帮助读者顺利完成自定义形状的词云图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于Echarts词云图如何实现自定义形状

前言

因为这段时间一直在弄Echarts词云图，所以对这东西稍微有点了解了，自己遇到的困难解决了，也分享给可能遇到同样问题的你，希望可以帮助到大家顺利解决。

一、前期准备

首先要说明的是，Echarts词云图是给了几个默认的形状的，具体的如下（完整的代码我就不贴了，既然大家搜索到这里，一定是对框架有所了解了，具体的也可以查看我的另一篇博客地址贴在这）

// cardioid (apple or heart shape curve, the most known polar equation), diamond (
  // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
 // 词云的形状，可选值有  cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形  triangle三角形，pentagon五角形，star五角星形，
 shape:'star',

在进行自定义形状的过程中，简单来说我们需要一张图片，然后通过转换工具将图片格式转化成base64，再通过代码实现词云图展示。
关于图片，要说明的是，我们的这张图片一定要是矢量图，并且最好为黑色填充，也不能说必须是黑色，但就我实验来看，黑色的都成功了，其他的我都失败了0.0这里向大家推荐阿里巴巴矢量图标库官网-iconfont地址戳这，这里边的基本上都是可以的（注意图片填充要为黑色），然后再附上图片转化base64的网站地址戳这
这样我们的前期准备工作就完成了

二、形成步骤

1.转化图片为base64

我这里在Iconfont上下载了一张猫头的图片，如图
在这里插入图片描述

然后我们用我上面个给的网站将图片转化成base64格式码
在这里插入图片描述

全选复制，准备使用！

2.填入代码，实现形状

废话不多说，我先贴代码和示例图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cat</title>
  <script type="text/javascript" src="./echarts.js"></script>
  <script type="text/javascript" src="./echarts-wordcloud.min.js"></script>
</head>
<body>
  <div id="main" style="width: 700px; height: 500px"></div>
  <script>
    onload = function () {
   
      var data = {
   
        value: [{
   
          "name": "花鸟市场",
          "value": 1446
        },
          {
   
            "name": "汽车",
            "value": 928
          },
          {
   
            "name": "视频",
            "value": 906
          },
          {
   
            "name": "电视",
            "value": 825
          },
          {
   
            "name": "Lover Boy 88",
            "value": 514
          },
          {
   
            "name": "动漫",
            "value": 486
          },
          {
   
            "name": "音乐",
            "value": 53
          },
          {
   
            "name": "直播",
            "value": 163
          },
          {
   
            "name": "广播电台",
            "value": 86
          },
          {
   
            "name": "戏曲曲艺",
            "value": 17
          },
          {
   
            "name": "演出票务",
            "value": 6
          },
          {
   
            "name": "给陌生的你听",
            "value": 1
          },
          {
   
            "name": "资讯",
            "value": 1437
          },
          {
   
            "name": "商业财经",
            "value": 422
          },
          {
   
            "name": "娱乐八卦",
            "value": 353
          },
          {
   
            "name": "军事",
            "value": 331
          },
          {
   
            "name": "科技资讯",
            "value": 313
          },
          {
   
            "name": "社会时政",
            "value": 307
          },
          {
   
            "name": "时尚",
            "value": 43
          },
          {
   
            "name": "网络奇闻",
            "value": 15
          },
          {
   
            "name": "旅游出行",
            "value": 438
          },
          {
   
            "name": "景点类型",
            "value": 957
          },
          {
   
            "name": "国内游",
            "value": 927
          },
          {
   
            "name": "远途出行方式",
            "value": 908
          },
          {
   
            "name": "酒店",
            "value": 693
          },
          {
   
            "name": "关注景点",
            "value": 611
          },
          {
   
            "name": "旅游网站偏好",
            "value": 512
          },
          {
   
            "name": "出国游",
            "value": 382
          },
          {
   
            "name": "交通票务",
            "value": 312
          },
          {
   
            "name": "旅游方式",
            "value": 187
          },
          {
   
            "name": "旅游主题",
            "value": 163
          },
          {
   
            "name": "港澳台",
            "value": 104
          },
          {
   
            "name": "本地周边游",
            "value": 3
          },
          {
   
            "name": "小卖家",
            "value": 1331
          },
          {
   
            "name": "全日制学校",
            "value": 941
          },
          {
   
            "name": "基础教育科目",
            "value": 585
          },
          {
   
            "name": "考试培训",
            "value": 473
          },
          {
   
            "name": "语言学习",
            "value": 358
          },
          {
   
            "name": "留学",
            "value": 246
          },
          {
   
            "name": "K12课程培训",
            "value": 207
          },
          {
   
            "name": "艺术培训",
            "value": 194
          },
          {
   
            "name": "技能培训",
            "value": 104
          },
          {
   
            "name": "IT培训",
            "value": 87
          },
          {
   
            "name": "高等教育专业",
            "value": 63
          },
          {
   
            "name": "家教",
            "value": 48
          },
          {
   
            "name": "体育培训",
            "value": 23
          }

最低0.47元/天解锁文章