理县到汶川公路"生命线"打通!

一条包含图片的好消息,但具体内容未给出详细说明。
好消息!!!

http://news.163.com/08/0515/20/4C0RS81K0001124J.html

[img]http://cimg21.163.com/cnews/2008/5/15/20080515202655a9dbd.jpg[/img]
let data = [ { "id": "302Y", "parentId": "302K", "weight": null, "name": "四川嘉盛电力建设有限责任公司(合并)", "type": "B", "shortName": "嘉盛(合并)", "cityCode": null, "children": [ { "id": "304Q", "parentId": "302Y", "weight": null, "name": "嘉盛本部", "type": "B", "shortName": "嘉盛本部", "cityCode": null, "isHighlight": false }, { "id": "304R", "parentId": "302Y", "weight": null, "name": "阿坝", "type": "B", "shortName": "阿坝", "cityCode": null, "isHighlight": false }, { "id": "304S", "parentId": "302Y", "weight": null, "name": "黑水", "type": "B", "shortName": "黑水", "cityCode": null, "isHighlight": false }, { "id": "304T", "parentId": "302Y", "weight": null, "name": "红原", "type": "B", "shortName": "红原", "cityCode": null, "isHighlight": false }, { "id": "304U", "parentId": "302Y", "weight": null, "name": "检修", "type": "B", "shortName": "检修", "cityCode": null, "isHighlight": false }, { "id": "304V", "parentId": "302Y", "weight": null, "name": "金川", "type": "B", "shortName": "金川", "cityCode": null, "isHighlight": false }, { "id": "304W", "parentId": "302Y", "weight": null, "name": "理县", "type": "B", "shortName": "理县", "cityCode": null, "isHighlight": false }, { "id": "304X", "parentId": "302Y", "weight": null, "name": "马尔康", "type": "B", "shortName": "马尔康", "cityCode": null, "isHighlight": false }, { "id": "304Y", "parentId": "302Y", "weight": null, "name": "茂州", "type": "B", "shortName": "茂州", "cityCode": null, "isHighlight": false }, { "id": "304Z", "parentId": "302Y", "weight": null, "name": "壤塘", "type": "B", "shortName": "壤塘", "cityCode": null, "isHighlight": false }, { "id": "305A", "parentId": "302Y", "weight": null, "name": "若尔", "type": "B", "shortName": "若尔", "cityCode": null, "isHighlight": false }, { "id": "305B", "parentId": "302Y", "weight": null, "name": "松潘", "type": "B", "shortName": "松潘", "cityCode": null, "isHighlight": false }, { "id": "305C", "parentId": "302Y", "weight": null, "name": "汶川", "type": "B", "shortName": "汶川", "cityCode": null, "isHighlight": false }, { "id": "305D", "parentId": "302Y", "weight": null, "name": "物资", "type": "B", "shortName": "物资", "cityCode": null, "isHighlight": false }, { "id": "305E", "parentId": "302Y", "weight": null, "name": "小金", "type": "B", "shortName": "小金", "cityCode": null, "isHighlight": false }, { "id": "305F", "parentId": "302Y", "weight": null, "name": "新能源", "type": "B", "shortName": "新能源", "cityCode": null, "isHighlight": false } ] } ] option = { tooltip: { trigger: 'item', triggerOn: 'mousemove', formatter: function (params) { if (params.data) { console.log(params.data) const { name, receiptMount, paymentMount, clientNum, supplierNum } = params.data; return ` <strong>节点名称:</strong> ${name}<br/> <strong>收款金额:</strong> ${receiptMount || '0'}<br/> <strong>付款金额:</strong> ${paymentMount || '0'}<br/> <strong>客户数量:</strong> ${clientNum || '0'}<br/> <strong>供应商数量:</strong> ${supplierNum || '0'} `; } return ''; } }, series: [{ type: 'tree', data: data, nodeClick: 'none', // 禁用默认的节点点击行为 top: '10%', // 调整树图位置 left: 'center', bottom: '20%', symbol: 'rect', // 设置节点形状为矩形 symbolSize: [100, 50], // 设置矩形大小 [宽度, 高度] initialTreeDepth: 0, // 初始展开层级深度 expandAndCollapse: false, // 禁止节点的扩展和收起 label: { position: 'inside', // 文本显示在内部 verticalAlign: 'middle', // 垂直居中对齐 align: 'center', // 水平居中对齐 fontSize: 14, color: '#fff' }, itemStyle: { // borderColor: '#a4ead9', // 边框颜色 borderWidth: 0, color: { type: 'linear', x: 0, y: 0, x2: 0, y2:1, colorStops: [ { offset: 0, color: '#34a9a2' }, // 起始颜色 { offset: 1, color: '#a4ead9' } // 结束颜色 ], // globalCoord: false } }, lineStyle: { color: '#ccc', // 连接线的颜色 width: 2 // 连接线宽度 }, edgeShape: 'polyline', // 设置边的形状为折线 edgeForkPosition: '50%', // 子树中折线段分叉的位置 layout: 'orthogonal', // 正交布局 orient: 'TB', // 方向:从顶到底 }] }; 线与线之间靠太近了
最新发布
05-23
### 调整 ECharts 树状图连接线间距的方法 在 ECharts 中,树状图的连接线是由 `lineStyle` 和 `label` 等配置项控制的。为了增加连接线之间的距离或避免线条过于靠近,可以通过调整以下配置项实现: #### 1. 调整节点布局参数 通过设置 `symbolSize`、`left`、`right`、`top` 和 `bottom` 参数来调整节点和边界的布局,从而间接影响连接线的分布[^1]。 ```javascript series: [{ type: 'tree', data: [yourData], left: '20%', // 调整左侧边界 right: '20%', // 调整右侧边界 top: '10%', // 调整顶部边界 bottom: '20%', // 调整底部边界 symbolSize: 10, // 调整节点大小 label: { normal: { position: 'inside', fontSize: 12 } }, lineStyle: { normal: { color: '#000', width: 2, curveness: 0.5 // 调整线条弯曲度 } } }] ``` #### 2. 使用 `edgeShape` 控制线条形状 ECharts 提供了 `edgeShape` 属性,用于定义连接线的形状。通过设置为 `'polyline'` 或 `'curve'`,可以改变线条的路径,从而减少线条重叠的可能性[^4]。 ```javascript series: [{ type: 'tree', edgeShape: 'polyline', // 使用折线代替曲线 edgeFork: { distance: 30 // 设置分叉点的距离 } }] ``` #### 3. 调整 `layout` 和 `orient` 参数 通过修改 `layout`(如 `'orthogonal'` 或 `'radial'`)以及 `orient`(如 `'vertical'` 或 `'horizontal'`),可以重新定义树的布局方式,从而改变连接线的分布[^3]。 ```javascript series: [{ type: 'tree', layout: 'orthogonal', // 正交布局 orient: 'vertical', // 垂直方向 initialTreeDepth: 2, // 初始显示的深度 expandAndCollapse: true // 是否支持折叠 }] ``` #### 4. 自定义 `label` 偏移 如果需要进一步调整连接线上的标签位置,可以通过 `label` 的 `offset` 属性进行微调,避免标签与线条重叠[^2]。 ```javascript series: [{ type: 'tree', label: { normal: { offset: [10, 10], // 设置标签偏移量 position: 'middle' } } }] ``` #### 注意事项 - 当节点数量较多时,建议关闭动画以提高性能,但需注意关闭动画可能导致线条残留问题。此时可以通过动态更新数据并手动清除残留线条来解决。 - 如果需求变动频繁,建议将配置项封装为函数,便于灵活调整。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值