echarts 树tree将节点的文字竖着放

您所在的位置：网站首页 › 四个字竖着写的字 › echarts 树tree将节点的文字竖着放

echarts 树tree将节点的文字竖着放

2024-07-06 07:00| 来源: 网络整理| 查看: 265

echarts 树tree将节点的文字竖着放 1.1 实现效果

在这里插入图片描述

1.2 每个标签的文字竖着显示

主要是修改 label 下 formatter ，让每行显示一个字符，代码如下：

formatter: (params) => { let newName = '' let len = params.data.name.length let strLen = 1 //一行显示几个字 let rowNum = Math.ceil(len / strLen) if (len > strLen) { for (let p = 0; p < rowNum; p++) { let tempStr = '' let start = p * strLen let end = start + strLen if (p == rowNum - 1) { tempStr = params.data.name.substring(start, len) } else { tempStr = params.data.name.substring(start, end) + '\n' } newName += tempStr } } else { newName = params.data.name } let n = newName if (n.length > 16) { n = n.slice(0, 16) + '...' } let str = `{name|${n}}` return str },

关键的设置在于 let strLen = 1 //一行显示几个字，还可以给 strLen 加判断条件以来区分每个节点每行的显示字数。

1.3 根节点文字样式修改在这里插入图片描述

1.3.1 根节点文字横着显示

需求：使得根节点的文字横着，其他标签竖着显示。解决：主要是给strLen 添加判断条件来判断，具体的代码如下：

let strLen = params.data.relationType === 0 ? 100 : 1 //一行显示几个字 1.3.2 给根节点添加文字

需求：给根节点添加总部、本企业标签；并单独设置总部、本企业标签的文字样式解决：通过lable下的 formatter 和 rich配合使用，可实现功能。在formatter 中给根节点标签中添加相应的文字，代码如下：

let str = `{name|${n}}` let isMain = params.data.relationType === 0 str = isMain ? `{name|${n}} {current|本企业} {main|总部}` : str

利用rich给总部、本企业标签文字设置不用的样式，代码如下：

rich: { name: { fontSize: 14 }, current: { fontSize: 12, padding: 0, color: '#07CA42', fontWeight: 600, backgroundColor: '#E5F7EA', borderRadius: 2 }, main: { color: '#0780ED', fontSize: 12, padding: 0, fontWeight: 600, backgroundColor: '#E6F2FD', borderRadius: 2 } } 1.4 全部代码 import * as echarts from 'echarts' export default { data() { return { treeData: { id: '1362', name: '总企业', relationType: 0, childList: [ { id: '2095', name: '测试企业1', relationType: 1, childList: [] }, { id: '2120', name: '测试企业2', relationType: 2, childList: [ { id: '2121', name: '测试企业21', relationType: 1, childList: [] }, { id: '2122', name: '测试企业22', relationType: 1, childList: [] } ] }, { id: '1448', name: '测试企业3', relationType: 2, childList: [ { id: '2048', name: '测试企业31', relationType: 1, childList: [] }, { id: '2177', name: '90794', relationType: 1, childList: [] }, { id: '2179', name: '51425', relationType: 2, childList: [ { id: '2180', name: '67685', relationType: 2, childList: [] }, { id: '2181', name: '666', relationType: 1, childList: [] } ] }, { id: '2188', name: '28701', relationType: 2, childList: [] } ] } ] }, Echarts: null, childLength: [] } }, mounted() { this.formatData(this.treeData) window.onresize = () => { this.$nextTick(() => { this.Echarts.resize() }) } }, methods: { formatData(data) { this.$nextTick(() => { this.recursive(data) this.setCanvasWidth() this.renderTree(data) }) }, // 递归-给每个子节点中添加 children recursive(data) { if (data.childList) { this.childLength.push(data.childList.length) data.children = data.childList data.childList.forEach((item) => { this.recursive(item) }) } else { return } }, // 根据树的childList设置容器宽度 setCanvasWidth() { let container = document.getElementsByClassName('ent-structure')[0] let maxLen = Math.max(...this.childLength) if (maxLen { let newName = '' let len = params.data.name.length let strLen = params.data.relationType === 0 ? 100 : 1 //一行显示几个字 let rowNum = Math.ceil(len / strLen) if (len > strLen) { for (let p = 0; p < rowNum; p++) { let tempStr = '' let start = p * strLen let end = start + strLen if (p == rowNum - 1) { tempStr = params.data.name.substring(start, len) } else { tempStr = params.data.name.substring(start, end) + '\n' } newName += tempStr } } else { newName = params.data.name } let n = newName if (n.length > 16) { n = n.slice(0, 16) + '...' } let str = `{name|${n}}` let isMain = params.data.relationType === 0 str = isMain ? `{name|${n}} {current|本企业} {main|总部}` : str return str }, rich: { name: { fontSize: 14 }, current: { fontSize: 12, padding: 0, color: '#07CA42', fontWeight: 600, backgroundColor: '#E5F7EA', borderRadius: 2 }, main: { color: '#0780ED', fontSize: 12, padding: 0, fontWeight: 600, backgroundColor: '#E6F2FD', borderRadius: 2 } } }, labelLayout: { dy: -20, verticalAlign: 'top' }, lineStyle: { // 树图边的样式 // color: 'rgba(0,0,0,.35)', // 树图边的颜色 width: 1, // 树图边的宽度 // curveness: 1, // 树图边的曲度 shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色 // shadowBlur: 10 // 图形阴影的模糊大小 }, blur: { // 淡出状态的相关配置，开启emphasis.focus后有效 itemStyle: {}, // 节点的样式 lineStyle: {}, // 树图边的样式 label: {} // 淡出标签的文本样式 }, leaves: { // 叶子节点的特殊配置 label: { // 叶子节点的文本标签样式 distance: 0, position: 'bottom', verticalAlign: 'middle' }, itemStyle: {}, // 叶子节点的样式 emphasis: {}, // 叶子节点高亮状态的配置 blur: {}, // 叶子节点淡出状态的配置 select: {} // 叶子节点选中状态的配置 }, animation: true, // 是否开启动画 expandAndCollapse: true, // 子树折叠和展开的交互，默认打开 animationDuration: 550, // 初始动画的时长 animationEasing: 'linear', // 初始动画的缓动效果 animationDelay: 0, // 初始动画的延迟 animationDurationUpdate: 750, // 数据更新动画的时长 animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果 animationDelayUpdate: 0 // 数据更新动画的延迟 } ] } /** * 遍历数节点 */ function nodesStutes(nodes) { if (nodes.childList && nodes.childList.length) { for (let i = 0; i < nodes.childList.length; i++) { if (nodes.childList[i].relationType === 2) { // 修改连线颜色 nodes.childList[i].lineStyle = { color: '#6DD400' } } else if (nodes.childList[i].relationType === 1) { nodes.childList[i].lineStyle = { color: '#0780ED' } } nodesStutes(nodes.childList[i]) } } } nodesStutes(data) this.Echarts.setOption(options, true) } } } .ent-structure { width: 100%; height: 100%; background: #fff; } .ent-tree { width: 100%; height: 100%; overflow: auto; }

【本文地址】

echarts 树tree将节点的文字竖着放

echarts 树tree将节点的文字竖着放

今日新闻

推荐新闻