如何在echartjs中向树形图表添加更多填充？

Question

对于某些工具，我们使用echartjs的树形图。

一切正常但我有一个问题，它是树形图中填充的大小。

正如您在此图像中看到的一切都很好，但我无法为此图表启用更多填充：

这是我的代码：

myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    myChart.setOption(option = {

        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },

        series:[
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '15%',
                bottom: '1%',
                right: '7%',

                symbolSize: 7,

                orient: 'RL',

                label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                },

                leaves: {
                    label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

谢谢 ：）

Answer 1

您需要将top和bottom属性的值更改为负值，并将left和right属性更改为更大的正值。

例如，设置top : -10%和bottom: -15%。然后Right: 20%和left:15%。在找到适合您情况的组合之前，您必须尝试不同的值。右侧和左侧值越高，顶部和底部值越低，效果越明显。也就是说，使您的图表更高更窄，从而间隔或填充值。

您还可以将symbolSize属性的值减小到1。

这是JsFiddle的链接

Answer 2

Echart version 4从节点中删除了填充选项。我也尝试解决这个问题，但在echart github上有一个问题。您可以使用mouseOver等其他功能。