angular - EchartsJS：具有正确比例的 xAxis 类别

Question

在 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']
};

这将按照提供的顺序（柏林 -> 5、汉堡 -> 3 等）将 series.data 与 xAxis.data 匹配，从而生成一个从 5 开始、下降到 3、然后再上升到 4 的图表，依此类推。这也意味着这些类别中的每一个都沿图表均匀分布：这里的每个位置之间总是有相同的空间。

您也可以将 xAxis.type 设置为 'value' ：

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

这将自动创建一个范围为 1-5 的 x 轴，从而匹配 1 -> 1、2 -> 2 等等，基本上创建一个线性折线图。由于此 xAxis 是自动生成的，因此在创建“类别”时会考虑不同的数据点距离，这意味着类别 1 和类别 800 之间会有很大的空间，而在第一个示例中，空间将是平均分布在所有可能的 x 轴类别中。

我想要的是两全其美：

如果我将类别数据从“[Berlin, Hamburg..]”之类的位置更改为 [100, 200, 250, 300, 500] 之类的距离，我仍然希望它们作为类别，以便我的系列的第一个值。数据数组匹配我的 xAxis.data 数组的第一个值（5 --> 100、3 --> 200、4 --> 250 等），但我还希望类别“500”远离类别“300”，而类别“250”将非常接近类别“300”。

有没有办法用 EchartsJS 实现这一点？

标签： angularchartsecharts