最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I add more padding to tree chart in echartjs? - Stack Overflow

programmeradmin1浏览0评论

For some tools, we use tree chart from echartjs .

Everything works fine but I have one problem and it is the size of padding in tree chart.

As you can see in this image everything is fine, but I can't enable more padding to this chart : i want this chart for my friend website (امروز چندمه)

And this is my code :

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

Thanks :)

For some tools, we use tree chart from echartjs .

Everything works fine but I have one problem and it is the size of padding in tree chart.

As you can see in this image everything is fine, but I can't enable more padding to this chart : i want this chart for my friend website (امروز چندمه)

And this is my code :

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

Thanks :)

Share Improve this question edited Feb 24, 2020 at 13:24 majid asked Feb 26, 2019 at 12:56 majid majid 7231 gold badge13 silver badges37 bronze badges 1
  • can you check the css element corresponding to it and override the css properties to have padding – Shadab Ahmed Commented Feb 28, 2019 at 15:02
Add a ment  | 

3 Answers 3

Reset to default 5 +25

You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values.

For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a bination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values.

You could also reduce the value of the symbolSize property e.g to 1.

Here is the link to the JsFiddle

Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.

Seems like in Echart version 4 there is no way to define padding for nodes But there is a way to avoid collapsing of nodes.

This tree is gonna take as much space (width and height) as you allow it to take. So you can just specify bigger height value for outer div. And then overflow: auto; for next div.

<div style="overflow:auto">
 <div style="min-height:2000px">
  <EchartsSVG/>
 </div>
</div>

You can create a formula to count your nodes and calculate min-height

发布评论

评论列表(0)

  1. 暂无评论