如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)

产品有个需求，需要用echarts画一颗树，原型大概这样

然后看了下官网,echarts的树图大概如下,呃呃呃，差好多，那就改呗

然后一顿操作页面出来差不多了，思路大概如下，左边那个灰色按钮是自己写的，总体数据是一颗树，我把第一层的label和line隐藏实际效果就差不多了

然后发现有个问题，echarts树的点击事件只能绑定在前面的symbol(圆点)上，象征性的问了下产品，果不其然，被产品怼了回来，然后各种搜索，也没找到自己想要的结果，那只能自己手写了

我大概讲下我的思路啊，大概就是把symbol定位在字上面就行，前面的圆点用label的formatter进行富文本标签展示，效果大概就出来了,只要把symnol的背景色变透明即可(transparent)

下面是代码，没有左边的标签，数据纯属伪造，如有雷同，我也不管，可以直接去echats社区执行

const data = {name: '腾讯',label: {normal: {position: 'center',verticalAlign: 'middle',align: 'left',backgroundColor: '#54627B',borderRadius: 28,color: '#fff',padding: [14, 42],}},itemStyle: {opacity: 0,},children: [{name: '和平精英',}, {name: 'CF',}, {name: 'LOL',}, {name: 'DNF',}, {name: '欢乐斗地主',}, {name: '天天酷跑',}, {name: '我的侠客',}, {name: '天涯明月刀',}, {name: '王者荣耀',selected: true,children: [{name: '小乔',}, {name: '大乔'}, {name: '孙尚香 '}, {name: '蔡文姬'}, {name: '女娲'}]}, {name: '宏图之下',}, {name: 'QQ飞车',}, {name: 'QQ炫舞',}, {name: '部落冲突',}]};const leftOffset = data.children.filter((item) => item.selected === true)[0].name.length * -13 - 10;const totalNum = 344;let maxLength = 0;data.children.forEach((item) => {maxLength = item.name.length * 13 > maxLength ? item.name.length * 13 : maxLength;})data.children.forEach((item) => {//   item.symbolOffset = [leftOffset, 0];const length = item.name.length * 13;console.log(length)item.level = 1;item.lineStyle = {color: 'none'};item.symbolSize = [maxLength, 13];item.symbolOffset = [leftOffset / 2 - 10, 0];item.label = {offset: [-maxLength - 10, 0],formatter: `{greyCircle|}{txtPadding|${item.name}}`};item.itemStyle = {color: 'transparent'};if (item.children && item.children.length) {item.label = {color: '#009FFF',offset: [-maxLength - 10, 0],formatter: `{blueCircle|}{txtBluePadding|${item.name}}`};// item.children.push({//   totalNum,//   name: `总计${totalNum}条`// });item.children.forEach((ele, index) => {ele.itemStyle = {color: '#009FFF'};ele.label = {color: '#009FFF',};ele.symbolSize = 10;ele.symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA1UlEQVRoQ+2ZMQoCQRAEZw0EBTOT+5Gxgb80MvBHYmIkggpycqlRU3AgS128AzPVRSfXqpOvdXJHeci/JWkiSSKb07hdvuo8vX0vanfft1syR97Mmsj6OA6rqsu02PNTw+PQrmTJZMZDEkomklD6eaNaCTTVSiipFqCkWgCarZVAU62Ekq0FKKkWgGZrJdBUK6FkawFKqgWg2VoJNNVKKNlagJJqAWi2VgJNtRJKthagpFoAmq2VQFOthJKtBSh183sa3I5HZm0tvBUY9BAAbdaRbhL5AimzGEK+kjc4AAAAAElFTkSuQmCC';//   if (item.children.length === index + 1) {//     ele.isLastOne = true;//     ele.label.formatter = `{black|总计}${ele.totalNum}{black|条}`;//     ele.lineStyle = {//       color: 'none'//     };//     ele.symbolSize = 1;//     ele.label.offset = [6, 0];//   }});} else {}});option = {tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{type: 'tree',data: [data],left: '25%',right: '40%',symbolSize: 7,symbol: 'rect',label: {normal: {position: 'right',verticalAlign: 'middle',align: 'left',backgroundColor: 'transparent',color: '#000',padding: [150, 7],rich: {black: {color: '#000'},greyCircle: {backgroundColor: '#D8D8D8',width: 8,height: 8,borderRadius: 4,},blueCircle: {backgroundColor: '#009FFF',width: 8,height: 8,borderRadius: 4},txtPadding: {color: '#000',padding: [0, 0, 0, 10],},txtBluePadding: {color: '#009FFF',padding: [0, 0, 0, 10],}}},},itemStyle: {borderWidth: 0,},lineStyle: {color: 'rgba(0, 159, 255, 0.6)'},leaves: {label: {normal: {position: 'right',verticalAlign: 'middle',align: 'left',backgroundColor: 'transparent',color: '#000',padding: 7,}},},expandAndCollapse: true,animationDuration: 0,animationDurationUpdate: 750}]};

假数据效果如下呢

如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)相关推荐

基于echarts树图画组织结构图
基于echarts树图画组织结构图注:新版本echarts已有折线树图绘制功能(Tree with Polyline),本法适合v4.2.1之前版本 1.下载echarts插件官网地址:https ...
echarts tree默认展开_echarts tree控制节点的展开收起
echarts使用版本 v4版本需求当数据量比较大时,tree的子节点会挤在一起,这不是产品想要的效果产品期望点击某一子节点时,其他同级节点自动收起,效果如下 echarts官方文档并没有提供类 ...
echarts树状图点击展开子节点_CPU眼里的结构设备树节点及属性详解
1 设备树(device tree)简介DTSpec定义一个devicetree的约束来描述硬件设备,boot引导程序将设备树传递给用户程序的内存空间中,并传递给用户相应设备树的指针.设备树为一个树形 ...
树点击节点导航在数据筛选显示和查看内容
2013年11月07日二〇一三年十月初五|立冬癸巳[蛇]癸亥月丁丑日甲辰时纳音五行:长流水. 达摩祖师圣诞 private void 树TreeView_NodeMouseClick(objec ...
echarts树点击label事件_ECharts 堆积木（砖块）游戏
最近突发奇想,用 3D 的堆叠柱图,做了一个搭积木的小游戏. 主要思路用一个几乎透明的 series-bar3D 铺满整个 grid3D,作为操作区,监听鼠标点击事件.完成堆积木的操作: 用多层数据 ...
echarts世界地图中的国家名称显示中文
export const nameMap = { "Singapore Rep.": "新加坡", "Dominican Rep.": &q ...
echarts树状图点击展开子节点_Echarts树形图展开和收缩
一.实现效果收缩效果: 展开效果: 二.实现代码展开/收缩切换 ; var dom = document.getElementById("container"); var m ...
echarts树状图怎么设置主节点和子节点的距离_教你秒懂CAD出图比例正确设置技巧...
1.你知道你用CAD画出的图打印出来会是多大吗? 2.你知道你图中标注文字打印出来字高是多少mm吗? 3.你能确定你画的1:100的图打印出来比例确实是1:100吗? 这个问题乍一看似乎简单,研究起来 ...
ios 圆形旋转菜单_iOS高级动画：圆形树展开收起动画
转自:标哥的技术博客,作者:黄仪标(微博) 前段时间帮某某做了一个动画效果,今天分享给大家.关于动画的基础知识,这里不会细说,如果您还没有核心动画的基础知识,请先阅读相关文章,了解核心动画如何使用,然 ...

如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)

如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)相关推荐

最新文章

热门文章