echarts5.x 词云图使用（`[ECharts] Unkown series wordCloud`）

echarts5.x 词云图使用（[ECharts] Unkown series wordCloud）

背景

起先还庆幸自己 echarts 用的是 5.x 的版本，似乎可以少些麻烦

结果发现按照 echarts-wordcloud 描述的操作歩鄹，词云图并出不来……

打开控制台，出现了报错：log.js:62 [ECharts] Unkown series wordCloud

估摸着就是引用不对，翻了几遍文档及网上的案例，都是那么简单的几步，并没有找到什么遗漏的操作

没有办法，就试着看看是不是引用有问题，我找了下 node_modules 目录，发现并没有 wordCloud 相关的包，居然引用也不报错？打印出来发现 undefined，找不到返回 undefined 似乎逻辑上也没什么问题……

没装上就重新装一下咯，结果发现 cnpm install echarts-wordcloud 秒过，但依赖包并没有下载过来，npm install echarts-wordcloud 等了半天装了一堆毫不相干的东西，还报了个错……

装不上……那就复制源码本地保存一份咯……

去到 echarts-wordcloud 的 github，复制了 echarts-wordcloud.min.js 代码，存在了 utils 目录下，然后用相对路径引入进来，发现就行了……

预期效果

样例代码

import * as echarts from "echarts"
import "@/utils/echarts-wordcloud.min.js"

drawLine () {
  let LineCharts = this.$refs.LineCharts;
  let myChart = echarts.init(LineCharts);
  let mockData = [{ name: '微信', value: 3328 }, { name: '南方+', value: 1045 }, { name: '东莞时间网', value: 834 }, { name: '东莞', value: 804 }, { name: '新浪微博', value: 532 }, { name: '今日头条', value: 493 }, { name: '腾讯新闻', value: 479 }, { name: '东莞阳光网', value: 387 }, { name: '东莞日报', value: 289 }, { name: '一点资讯', value: 287 }, { name: '东方头条网', value: 233 }, { name: '南方都市报', value: 228 }, { name: '新粤网', value: 207 }, { name: '南方plus', value: 206 }, { name: '网易新闻', value: 201 }, { name: '东方头条', value: 180 }, { name: '趣头条', value: 178 }, { name: '羊城派', value: 151 }, { name: '东莞时报', value: 143 }, { name: '莞讯网', value: 139 }, { name: '广州日报', value: 137 }, { name: '东莞阳光台', value: 132 }, { name: '搜狐新闻', value: 129 }, { name: '今日头条.APP', value: 116 }, { name: '东莞阳光平台', value: 108 }, { name: '腾讯新闻.APP', value: 107 }, { name: '南方网', value: 103 }, { name: 'UC头条', value: 98 }, { name: '凤凰新闻', value: 93 }, { name: '报告诉', value: 77 }, { name: '网易新闻.APP', value: 74 }, { name: '中国小康网', value: 64 }, { name: '东莞万江', value: 63 }, { name: '信息时报', value: 59 }, { name: '中国文明网', value: 58 }, { name: '东莞网', value: 57 }, { name: '搜狐新闻（自媒体）', value: 54 }, { name: '南方日报', value: 54 }, { name: '搜狐焦点', value: 53 }, { name: '阳光社区', value: 52 }, { name: '南方plus.APP', value: 47 }, { name: '阳光望牛墩', value: 46 }, { name: '中国报道', value: 43 }, { name: '新浪新闻', value: 43 }, { name: '房掌柜', value: 39 }, { name: '广州日报网', value: 38 }, { name: 'ZAKER', value: 38 }, { name: '一点资讯.APP', value: 35 }, { name: '聚焦东莞', value: 35 }, { name: '广州新闻网', value: 35 }, { name: '新浪', value: 31 }, { name: '东莞服务热线12345', value: 31 }, { name: '人民网', value: 29 }, { name: '阳光热线问政平台', value: 26 }, { name: '党报头条', value: 26 }, { name: '羊城晚报地方版', value: 24 }, { name: '网易房产', value: 23 }, { name: '中国网', value: 22 }, { name: '金羊网', value: 21 }, { name: '东莞长安', value: 21 }, { name: '百家号', value: 21 }, { name: '澎湃新闻', value: 20 }, { name: '读特', value: 19 }, { name: '东方头条.APP', value: 17 }, { name: '阳光石排', value: 16 }, { name: '新浪乐居', value: 16 }, { name: '微信邦', value: 16 }, { name: '搜狐新闻.APP', value: 16 }, { name: '人民日报', value: 16 }, { name: '百度新闻', value: 16 }, { name: '南方都市报.APP', value: 15 }, { name: '荔枝网', value: 15 }, { name: '华人头条', value: 15 }, { name: '广东建设报', value: 15 }, { name: '中国', value: 14 }, { name: '阳光黄江', value: 14 }, { name: '东方网', value: 14 }, { name: '网易', value: 12 }, { name: '搜狐网', value: 12 }, { name: '和讯', value: 12 }, { name: '文化莞城', value: 11 }, { name: '聊聊网', value: 11 }, { name: '58同镇', value: 11 }, { name: '凤凰网', value: 10 }, { name: '新浪网', value: 9 }, { name: '趣头条.APP', value: 9 }, { name: '凤岗网', value: 9 }, { name: '新快网_新快报', value: 8 }, { name: '上游新闻', value: 8 }, { name: '东莞市城市综合管理局', value: 8 }, { name: '大众网', value: 8 }, { name: '中国新闻网', value: 7 }, { name: '第一推', value: 7 }, { name: '大洋网', value: 7 }, { name: '新浪网', value: 6 }, { name: '新浪看点', value: 6 }, { name: '手机和讯网', value: 6 },].slice()

  // 随机颜色
  let randcolor = () => {
    let r = 100 + ~~(Math.random() * 100);
    let g = 135 + ~~(Math.random() * 100);
    let b = 100 + ~~(Math.random() * 100);
    return `rgb(${r}, ${g}, ${b})`
  }
  myChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: params => {
        const { name, value } = params
        return `
平台：${name} 

数量：${value}
`
      }
    },
    series: [{
      type: 'wordCloud',
      gridSize: 20,
      sizeRange: [12, 50],
      rotationRange: [0, 0],
      shape: 'circle',
      textStyle: {
        color: params => {
          return randcolor()
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: mockData
    }]
  })
},

自定义形状

形状可以从 iconfont 找，下下来的图片可以通过在线工具转成 base64 格式然后在代码里引用

• 图片最好选纯黑色填充，120px 左右大小（我试了好多种图片，只有2种成功了，匹配度还不是很高，后续用到了再探索吧……）
• 参考：关于Echarts词云图自定义形状如何实现

let maskImage = new Image();
maskImage.src = "data:image/png;base64,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"

myChart.setOption({
  series: [{
    type: 'wordCloud',
    // gridSize: 20,
    sizeRange: [12, 50],
    // rotationRange: [0, 0],
    rotationRange: [-45, 0, 45, 90],
    maskImage: maskImage, // 关键代码
    // ... 其他业务代码

动效

• 未研究，留个看着靠谱的参考：圆形词云(旋转)TagCanvas