Echarts图表——词云

实现目标图表

1、依赖插件

基础图表: npm install echarts
词云插件: npm install echarts-wordcloud
文本复制插件: npm install clipboard

2、实现功能及踩的坑

• 数据以词云方式展示，限制展示10个字符以内，其余显示省略号
• 鼠标点击某个词显示tooltip悬浮框，点击复制全称名称

• 绑定按钮不生效，需要添加pointer-events: auto属性
• 按钮点击事件放在methods不生效，需绑定到window下，考虑到项目基于vue做的，采用了watch监听的方式实现

3、功能实现

• 基本配置
  methods中

// 数据处理
dataListCloud.map(item => {
  item.formatterName = item.name
  if (item.name && item.name.length > 10) {
     item.name = item.name.substring(0, 10) + '...'
  }
})
// 基本配置
tooltip: {
  enterable: true,
  triggerOn: 'click',
  trigger: 'item',
  confine: true,
  position: 'top',
  formatter: (item) => {
    // 点击元素后改变hookToolTip值触发watch中监听
    setTimeout(() => {
      this.hookToolTip = item.data.formatterName
    },500)
    // 样式属性解决事件不生效
    // class btn绑定复制事件所用，方便clipboard在mounted中监听所用
    // data-clipboard-text是clipboard复制的文本设置
    // id btn-tooltip 添加点击监听事件
    return `<div style="pointer-events:auto;cursor:pointer" class="btn" data-clipboard-text=${item.data.formatterName}  id="btn-tooltip">${item.data.formatterName}: ${item.value}</div>`
  }
}

• 实现方法一

import Clipboard from "clipboard";
  mounted() {
    const clipboard = new Clipboard('.btn');
    clipboard.on('success', (e) => {
      this.$message({
        showClose: true,
        message: '复制成功',
        type: 'success'
      });
      e.clearSelection();
    });
    clipboard.on('error', (e) => {
      this.$message.error('复制失败');
    });
  }

• 此方法不需要用到watch监听事件，缺点是假如有多个复制事件，就得写多个.on和.error的事件监听，于是就考虑将其封装
• 封装后在mounted只能监听一次复制，如果要封装只能配合watch方法使用

• 实现方法二

import handleClipboard from '@/utils/clipboard'
watch: {
  hookToolTip: function (name) {
    this.$nextTick(() => {
      const html_ = document.querySelector("#btn-tooltip")
      html_ && html_.addEventListener('click', (e) => {
        // 封装的方法
        handleClipboard('.btn')
      })
    })
  }
},

• clipboard方法封装

// clipboard.js
import Vue from "vue";
import Clipboard from "clipboard";

function clipboardSuccess(text) {
  Vue.prototype.$message({
    message: `${text}    复制成功`,
    type: "success",
    duration: 1500,
  });
}

function clipboardError() {
  Vue.prototype.$message({
    message: "复制失败",
    type: "error",
  });
}

export default function handleClipboard(className) {
  var clipboard = new Clipboard(className);
  clipboard.on("success", (e) => {
    clipboardSuccess(e.text);
    clipboard.off("error");
    clipboard.off("success");
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboardError();
    clipboard.off("error");
    clipboard.off("success");
    clipboard.destroy();
  });
}

此方法需配合属性变化监听实现，相对麻烦些，适用的场景多一些

• 两种方式皆可实现功能，根据自己的需求选择一种即可

词云样式配置参考