Не могу найти параметр ширины в Charts

Вопросы и проблемы
#1

Плагин 2.3.3-242, jmix версия 2.3.4.

Нужно создать экран с 3-я диаграммами типа charts, 2 круга типа pie и под третий вроде как подходит тип bar. Каждая диаграмма вписывается в vbox и 3 таких vbox вписываются в hbox. С кругами более-менее понятно, а вот победить bar никак не получается.
Чтобы сильно не растягивать экран, диаграмму bar нужно вписать в ширину 25em, при этом поменять ось Х и ось Y местами, то есть ось Y - это категории, а ось Х - значения. Код выглядит вот так:

Спойлер 
                           <vbox>
                <charts:chart id="effectBar" width="30em" alignSelf="STRETCH">
                    <charts:series>
                        <charts:bar name="Эффекты" seriesLayoutBy="ROW" realtimeSort="true" large="true">
                            <charts:label show="true" position="RIGHT"/>
                        </charts:bar>
                    </charts:series>
                    <charts:xAxes>
                        <charts:xAxis type="VALUE" show="false"/>
                    </charts:xAxes>
                    <charts:yAxes>
                        <charts:yAxis type="CATEGORY" inverse="true"/>
                    </charts:yAxes>
                </charts:chart>
            </vbox>

При этом результат получается примерно такой:

Спойлер

image

В центре находится bar-диаграмма, которая полностью съедает названия категорий. При увеличении размера лучше не становится:

Спойлер

image

Как можно урезать ширину столбцов, которые отображают данные, чтобы увеличить ширину категорий за счёт этого и вписать всю диаграмму в 30em? Можно урезать прям максимально, чтобы было похоже со стороны на progressBar. Кучу настроек уже перетыкал, никак не получается.
Хочу чтобы примерно выглядело так (это в Paint нарисовано):

Спойлер

HowToNeed

И ещё, если можно, то сжать бы по высоте каждую категорию, слишком большое расстояние между ними.

upd:
Архив тестового: Ссылка

#3

Здравствуйте!

Для того, чтобы управлять расположением series на слое chart вы можете использовать атрибут grid.

grid используется для настройки места отображения series, настройки его пропорций и так далее. Вот соответствующая документация Apache ECharts: Documentation - Apache ECharts.

В нашем онлайн демо приложении есть пример с финансовой диаграммой, в котором используется расположение series с помощью grid: UI Samples :: Candlestick series with volume.

В вашем случае, следует модифицировать effectBar следующим образом:

Показать код 
                <charts:chart id="effectBar" width="25em" alignSelf="STRETCH">
                    <charts:grid>
                        <charts:gridItem left="70%" bottom="40%"/>
                    </charts:grid>

                    <charts:series>
                        <charts:bar name="Эффекты" seriesLayoutBy="ROW" realtimeSort="true" large="true">
                            <charts:label show="true" position="RIGHT"/>
                        </charts:bar>
                    </charts:series>
                    <charts:xAxes>
                        <charts:xAxis type="VALUE" show="false"/>
                    </charts:xAxes>
                    <charts:yAxes>
                        <charts:yAxis type="CATEGORY" inverse="true"/>
                    </charts:yAxes>
                </charts:chart>

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

Результат:
image

С уважением,
Дмитрий

#5

Дмитрий, спасибо большое!

Когда не сталкивался с таким, очень тяжело самому найти решение. Сотню настроек перетыкал, но grid почему-то интуитивно отмёлся)) Да и в пример со свечами тоже бы не догадался посмотреть, а если бы и посмотрел, то точно бы не понял что оттуда брать.

В документации Apache тоже перерыл разделы xAxis yAxis и прочие, многие настройки ничего на графиках не меняют (видимо они как-то зависят от других). Да ещё и с переводчиком половина настроек непонятно)).

-1 вопрос на мастер классе).