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

问题描述 投票:7回答:2

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

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

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

enter image description here

这是我的代码:

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
            }
        ]
    });
});

谢谢 :)

javascript charts visualization
2个回答
3
投票

您需要将topbottom属性的值更改为负值,并将leftright属性更改为更大的正值。

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

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

这是JsFiddle的链接


1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.