echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

基本使用方法

echarts-wordcloud是基于echarts的一个词云库,是我常用的一个组件,业务上用的多一点,但是这个库在echarts的官网文档里面没有说明,git上的说明也很少,有些配置需要自己摸索,下面都是我的血泪总结。官方github地址

依赖

首先要安装echarts包,这是基础包,然后还需要额外引入词云的包,对应的版本可自行选择,我这不是最新的

“echarts-wordcloud”: “^2.0.0”
“echarts”: “^5.1.2”

项目中使用:

import * as echarts from 'echarts'
import 'echarts-wordcloud'

echarts-wordcloud 的基本配置项

首先基本使用:

// 这里和echarts的使用一样,先拿到容器元素
const chart = echarts.init(document.getElementById('tlrealtimewordcloud'))
// 这里是官方给出的一些基本的配置项,我做一些说明
chart.setOption({
    ...
    series: [{
        type: 'wordCloud',
		// shape这个属性虽然可配置,但是在词的数量不太多的时候,效果不明显,它会趋向于画一个椭圆
        shape: 'circle',
        // 这个功能还没用过
        keepAspect: false,
        // 这个是可以自定义背景图片的,词云会按照图片的形状排布,所以有形状限制的时候,最好用背景图来实现,而且,这个背景图一定要放base64的,不然词云画不出来
        maskImage: maskImage,
        // 下面就是位置的配置
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        // 词的大小,最小12px,最大60px,可以在这个范围调整词的大小
        sizeRange: [12, 60],
        // 每个词旋转的角度范围和旋转的步进
        rotationRange: [-90, 90],
        rotationStep: 45,
        // 词间距,数值越小,间距越小,这里间距太小的话,会出现大词把小词套住的情况,比如一个大的口字,中间会有比较大的空隙,这时候他会把一些很小的字放在口字里面,这样的话,鼠标就无法选中里面的那个小字,这里可以用函数根据词云的数量动态返回间距
        gridSize: 8,
		// 允许词太大的时候,超出画布的范围
        drawOutOfBound: false,
		// 布局的时候是否有动画
        layoutAnimation: true,
        // 这是全局的文字样式,相对应的还可以对每个词设置字体样式
        textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // 颜色可以用一个函数来返回字符串,这里是随机色
            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'
            }
        },

        // 数据必须是一个数组,数组是对象,对象必须有name和value属性
        data: [{
            name: 'Farrah Abraham',
            value: 366,
            // 这里就是对每个字体的样式进行设置
            textStyle: {
            }
        }]
    }]
});

优化项

shape

shape也可以是一个函数,比如希望是矩形的时候(来自官方githup问答区)

shape: function shapeSquare(theta) {
                  return Math.min(
                  1 / Math.abs(Math.cos(theta)),
                  1 / Math.abs(Math.sin(theta))
                  )
                  },

gridSize

可以用一个函数根据词云的数量动态确定词间距

color

颜色可以在外面统一配置,也可以像下文那样给每个词都配置一下,这里推荐一组好看的配色

['#86D4FF', '#FF8F6C', '#2CF263', '#9FA8F7', '#1274FF', '#E6613D', '#FFC629', '#FFAB2E', '#F78289', '#FF6C96', '#45BFD4', '#4E31FF', '#31FBFB','#86D4FF',  '#BF8AFD', '#FFF500', '#DE58FF',  '#72ED7C', '#0BEEB8','#931CFF',  '#3D25F2', '#F995C8', '#FBE9B4',  '#FF4AB6']

效果是这样的
echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)_第1张图片

权重问题

组件会严格按照value值的大小分配权重,权重就体现在字体大小上。所以如果数据本身分布不均匀的时候,视觉效果看起来不够好,比如一个数为10000,其他的数为100-10,那么只能体现出两种权重了,即10000和其他。但是这样往往会导致视觉上,权重的分层不够明显,所以我们这个时候需要给数据分配权重,也就是改变每个词的fontSize.

代码主要思路是:

  • 数据量少于8个的时候,仅做了颜色的处理(业务需求,只有红黑两系颜色)
  • 数据量大于8个的时候,二分法,把数据分成四部分,
  • 对于第一梯队的数据来说,一般是最重要的,至少也有两个数据,我们只对这一部分的数据做权重处理,就可以有良好的视觉效果
  • 最大的那个词,给一个最大的权重60,第二个和第三个,分别给55和40,剩下的就是(40-排名数)
  • 如果还有需求的话,可以再细化一点,如果能上相关的聚类算法,那就更完美了
    大体效果为:
    echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)_第2张图片
    可以看见,排名靠前的都显示的比较好,直观而且有层次感

// 这里是我自己摸索的四分法,面对数据分配不均匀的时候还是挺有效果的

    const blackcolor = ['#000000', '#2a2a2a', '#545454', '#7e7e7e']
    const redcolor = ['rgb(249,8,8)', 'rgba(249,8,8, 0.7)', 'rgba(249,8,8, 0.5)', 'rgba(249,8,8, 0.3)']
    
    const iterate = (arr, i, j, l) => {
      if(l === 0){
        for(let k = i; k <= j; k++){
          if(k === 0){
            arr[k].textStyle = { color: blackcolor[l], fontSize: 60 }
          } else if(k < 3) {
            if(k % 2 === 0){
              arr[k].textStyle = { color: redcolor[l], fontSize: 40 }
            } else {
              arr[k].textStyle = { color: blackcolor[l], fontSize: 55 }
            }
          } else {
            if(k % 2 === 0){
              arr[k].textStyle = { color: redcolor[l], fontSize: 40 -  k }
            } else {
              arr[k].textStyle = { color: blackcolor[l], fontSize: 40 - k }
            }
          }
        }      
      } else {
        for(let k = i; k <=j ; k++){
          if(k % 2 === 0){
            arr[k].textStyle = { color: redcolor[l] }
          } else {
            arr[k].textStyle = { color: blackcolor[l] }
          }
        }      
      }
    } 
    
    const dealworddata = (data) => {
      let len = data.length
      if(len <= 8 ){
        let i = 0,j = 0,k = 0
        while(k<len){
          if( k % 2 === 0){
            data[k].textStyle = { color: redcolor[i] }
            i++
          } else {
            data[k].textStyle = { color: blackcolor[j] }
            j++
          }
          k++
        }
      } else {
        let mid = len >> 1
        let leftmid = len >> 1
        let rightmid = (len - 1 + mid) >> 1
        iterate(data, 0, leftmid, 0)
        iterate(data, leftmid, mid, 1)
        iterate(data, mid, rightmid, 2)
        iterate(data, rightmid, len-1, 3)
      }
    }

背景图片

const maskImage = new Image()
 maskImage.src = ‘’ // 这里是base64编码
 ...
 maskImage: maskImage

你可能感兴趣的:(echarts,javascript,前端)