Як отримати ширину стовпця після ініціалізації графіку за допомогою eCharts

5 Березня 2024 в 20:19 33

Ширину стовпця на діаграмі може бути корисно знати з різних причин. Наприклад, вона може бути використана для коректного розміщення анотацій або для налаштування інших елементів інтерфейсу на основі розмірів стовпців. У цій статті ми розглянемо, як отримати ширину стовпця після ініціалізації графіку за допомогою бібліотеки eCharts.

Зазвичай при роботі з бібліотекою eCharts, використовувачам доводиться налаштовувати розміри різних елементів графіку, таких як стовпці, лінії або сектори кругових діаграм. Однак, іноді може виникнути необхідність отримати ці розміри після того, як графік уже був створений і ініціалізований.

Одним із способів вирішення цього питання є використання внутрішніх методів та параметрів бібліотеки eCharts для отримання поточних значень розмірів стовпців. Давайте розглянемо цей процес крок за кроком.

const chart = echarts.init(document.getElementById('chartContainer'));
const option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [20, 30, 40, 50, 60],
        type: 'bar'
    }]
};
chart.setOption(option);
// Отримання ширини стовпця
const barWidth = ???; // Як отримати ширину стовпця після ініціалізації?

const chart = echarts.init(document.getElementById('chartContainer'));

const option = {

xAxis: {

type: 'category',

data: ['A', 'B', 'C', 'D', 'E']

yAxis: {

type: 'value'

series: [{

data: [20, 30, 40, 50, 60],

type: 'bar'

}]

};

chart.setOption(option);

// Отримання ширини стовпця

const barWidth = ???; // Як отримати ширину стовпця після ініціалізації?

Щоб отримати ширину стовпця після ініціалізації графіку за допомогою eCharts, можна використовувати обхідний метод, оскільки саме значення ширини не зберігається в опціях графіку. Однак можна отримати доступ до об’єкта графіку та його внутрішніх параметрів для отримання поточної ширини стовпця.

// Отримання об'єкта графіку
const chartInstance = chart.getModel();
// Отримання внутрішніх параметрів графіку
const series = chartInstance.getSeriesByType('bar')[0];
const barShape = series.getData().getItemLayout(0); // Беремо перший стовпець для отримання його розміру
// Отримання ширини стовпця
const barWidth = barShape.width;

// Отримання об'єкта графіку

const chartInstance = chart.getModel();

// Отримання внутрішніх параметрів графіку

const series = chartInstance.getSeriesByType('bar')[0];