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。

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

2 个答案: