ECharts树：如何在树的中间绘制水平分割线

问题描述 投票：0回答：1

如何从树的左边缘到右边缘有一条分割线，如下使用 ECharts 的分割线：

目前，下面的 HTML 和 JavaScript 代码可以生成没有分割线的树，但不确定如何为树添加分割线，类似于树的曲线。 HTML 文件 tree.html:

<!DOCTYPE html>
<html>
<head>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="tree" style="width: 800px; height: 400px;"></div>
    <script src="tree.js"></script>
</body>
</html>

JavaScript 文件tree.js:

// Create an ECharts instance
var myChart = echarts.init(document.getElementById('tree'));

var dogData = {
    name: 'Dog A',
    children: [
        {
            name: 'Sire',
            children: [
                {
                    name: 'Sire Sire',
                },
                {
                    name: 'Sire Dam',
                },
            ],
        },
        {
            name: 'Dam',
            children: [
                {
                    name: 'Dam Sire',
                },
                {
                    name: 'Dam Dam',
                },
            ],
        },
    ],
};

// Create the tree structure
var treeOption = {
    series: [
        {
            type: 'tree',
            layout: 'horizontal',
            data: [dogData],
            symbol: 'emptyCircle',
            symbolSize: 7,
            initialTreeDepth: -1,
            animationDurationUpdate: 750,
            label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
                fontSize: 9
            },
            leaves: {
                label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right'
                }
            },
        },
    ],
};

// Set option and render the chart
myChart.setOption(treeOption);
javascript tree line echarts
1个回答
0
投票

这里一个hacky解决方案：您可以添加一个图形系列，使其透明并使用

markLine
属性来指定坐标（该系列似乎至少有一个节点用于显示markLine）。

一个缺点是该线绑定到其坐标，并且如果折叠/扩展，则不会根据树移动。

代码：

series: [
    ...,
    {
        type: 'graph',
        silent: true,
        itemStyle: {color: 'tansparent'},
        data: [{x: 0,y: 0}],
        markLine: {
            data: [[{coord: [-1.5,0]},{coord: [1.5,0]}]],
            symbol: ['none', 'none'],
            lineStyle: {
                color: 'blue'
            }
        },
    }
]
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.