Echarts词云

  • tooltip: 词汇提示组件(同其他图标配置)
tooltip: {
      show: true,
      formatter: function (params) {
        const { marker, seriesName, data } = params 
        const { name, value } = data
        return `${marker}${seriesName}${name}<br>数值:${value}`
      }
    },
  • series配置项:
  • type:“wordCloud”
  • shape:circle/triangle/triangle-forward/cardioid(心形)/diamond(菱形/方形)/pentagon(五边形)/star
  • name: 系列名
  • left: chart组件离容器左侧的距离
  • top: chart组件离容器上侧的距离
  • right: chart组件离容器右侧的距离
  • bottom: chart组件离容器下侧的距离
  • width: ‘auto’
  • height: ‘auto’
  • sizeRange: [14,48] 文本大小范围,默认最小12,最大60
  • rotationRange: [-90, 90] 文本旋转角度
  • rotationStep: 45 旋转角度步长
  • gridSize: 8 网格大小,数值越大,文本之间的间隙越大
  • drawOutOfBound: false 是否允许文本超出画板
  • shrinkToFit: false 如果文本的字体大小超出可以放置文本的最大限度,设置为false,文本将不显示,设置为true,文本将缩小来自适应
  • layoutAnimation: true, 是否执行布局动画,注意:禁用该属性,当出现大量词汇时会阻碍UI渲染
  • textStyle: 文本属性
{
     fontFamily: 'sans-serif',
     fontWeight: 'bold',
     // Color can be a callback function or a color string
     color: function () {
         // Random color
         return 'rgb(' + [
             Math.round(Math.random() * 160),
             Math.round(Math.random() * 160),
             Math.round(Math.random() * 160)
         ].join(',') + ')';
     }
 },

maskImage:自定义shape形状,该属性传入一个图片对象,图片中不透明部分即为最终的词云形状

const maskImage = new Image()
maskImage = "@/assets/black.png"
maskImage.onLoad = () -> {
// 图表的初始化可以写在这,确保图片加载成功
}

keepAspect:保持maskImage的横纵比,为false时会随着组件的宽高拉伸
data:词汇的数据数组,其中name和value两个属性必不可少, name为词汇名称,value为词汇的频度

data: [{
   name: '大学生活多丰富',
   value: 22,
 },
 {
   name: '奇葩公司',
   value: 25,
 }]

emphasis:词汇高亮(同其他图标配置)
其他配置项可以参考echarts配置项手册

使用步骤:
  1. npm install echarts
  2. npm install echarts-wordcloud
  3. 代码示例如下

```javascript
```javascript
import { onMounted } from "vue"
import * as echarts from "echarts"
import "echarts-wordcloud"

onMounted(() => {
  const chart = echarts.init(document.getElementById('wordCloud'));
  chart.setOption({
    tooltip: {
      show: true,
      formatter: function (params) {
        const { marker, seriesName, data } = params 
        const { name, value } = data
        return `${marker}${seriesName}:${name}<br>数值:${value}`
      }
    },
    series: [{
      name: "词",
      type: 'wordCloud',
      shape: 'diamond',
      left: "left",
      top: 0,
      width: '100%',
      height: '100%',
      right: null,
      bottom: null,
      sizeRange: [14, 48],
      rotationRange: [-90, 90],
      rotationStep: 90,
      gridSize: 20,
      drawOutOfBound: false,
      shrinkToFit: false,
      layoutAnimation: true,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 225),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 180)
          ].join(',') + ')';
        }
      },
      data: [{
        name: '大学生活多丰富',
        value: 22,
      },
      {
        name: '奇葩公司',
        value: 25,
      },
      {
        name: '求职宝典',
        value: 30,
      },
      {
        name: '如何度过职业空窗期',
        value: 36,
      },
      {
        name: '如何选择专业',
        value: 32,
      },
      {
        name: '互联网大厂到底有多卷',
        value: 28,
      },
      {
        name: '职场尴尬时刻',
        value: 26,
      },
      {
        name: '胡歌',
        value: 22,
      },
      {
        name: '高圆圆',
        value: 32,
      },
      {
        name: '吴磊',
        value: 26,
      }]
    }]
  });
})

在这里插入图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值