Как добавить дополнительные отступы в древовидную диаграмму в echartjs? - PullRequest
Новая
       48

Как добавить дополнительные отступы в древовидную диаграмму в echartjs?

0 голосов
/ 26 февраля 2019

Для некоторых инструментов мы используем древовидную диаграмму из 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
            }
        ]
    });
});

Спасибо:)

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Echart version 4 убрал опцию заполнения из узлов.Я также пытался исправить это, но есть проблема на echart github .Вы можете использовать другие функции, такие как mouseOver.

0 голосов
/ 28 февраля 2019

Необходимо изменить значения свойств top и bottom на отрицательные значения, а свойства left и right - на более высокие положительные значения.

Например, установить top : -10% и bottom: -15%.Тогда Right: 20% и left:15%.Вам придется пробовать разные значения, пока не найдете комбинацию, подходящую для вашей ситуации. Чем выше правое и левое значения и чем ниже верхнее и нижнее значения, тем более выраженный эффект.То есть, делая вашу диаграмму выше и уже, тем самым увеличивая или увеличивая значения.

Вы также можете уменьшить значение свойства symbolSize, например, до 1.

Вот ссылка JsFiddle

...