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', // 方向：从顶到底
}]
};
线与线之间靠太近了
最新发布
一条包含图片的好消息，但具体内容未给出详细说明。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
