Echarts JS: категории xAxis с правильной пропорцией - PullRequest
Новая
       6

Echarts JS: категории xAxis с правильной пропорцией

1 голос
/ 02 марта 2020

В echarts (https://www.echartsjs.com/en/index.html) вы можете установить тип xAxis на «категорию» и «значение» (среди других типов). 

public series = [
  { name: 'Example A', data: [5, 3, 4, 2, 1], type: 'line' }
];

public Axis = {
 type: 'Category',
 name: 'location',
 data: ['Berlin', 'Hamburg', 'Erlangen', 'Munich', 'Bremen']
};

Это будет соответствовать серии .data с xAxis.data в указанном порядке (Берлин -> 5, Гамбург -> 3 и c.), в результате чего график начинается с 5, уменьшается до 3, затем снова до 4 и так далее. Это также означает, что каждая из этих категорий равномерно распределена по графику: здесь всегда имеется одинаковое пространство между каждым местоположением.

Вместо этого вы также можете установить xAxis.type в значение 'value': 

public Axis = {
 type: 'value',
 name: 'distance',
};

Это автоматически создаст ось х в диапазоне 1-5, что приведет к совпадению 1 -> 1, 2 -> 2 и т. Д., В основном создав линейный линейный график. Поскольку этот xAxis генерируется автоматически, при создании «категорий» будут учитываться разные расстояния между точками данных, что означает, что между категорией 1 и категорией 800 будет большой интервал, тогда как в первом примере это пространство будет в равной степени распределены между всеми возможными категориями оси x.

Хотелось бы получить лучшее из обоих миров:

Если бы я изменил данные своей категории из таких мест, как "[Берлин, Гамбург ..] "до таких расстояний, как [100, 200, 250, 300, 500], я все равно хотел бы, чтобы они были категориями, чтобы первое значение в моем массиве series.data совпадало с первым значением в моем массиве xAxis.data (5 - -> 100, 3 -> 200, 4 -> 250 и т. Д. c.), Но я бы также хотел, чтобы категория «500» находилась дальше от категории «300», тогда как категория «250» была бы скорее близко к категории «300».

Есть ли способ достичь этого с помощью Echarts JS?

...