实现目标图表
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();
});
}
此方法需配合属性变化监听实现，相对麻烦些，适用的场景多一些
- 两种方式皆可实现功能，根据自己的需求选择一种即可
