Пустая гистограмма в Vue-ECharts, несмотря на работу на игровой площадке ECharts ⇐ Javascript

[Anonymous]

У меня есть простой шаблон с гистограммой, который не отображается должным образом в Vue-ECharts, хотя те же самые параметры отлично работают на игровой площадке ECharts. Ошибок консоли нет — на диаграмме отображается только легенда, а в Vue-ECharts нет столбцов. Тем не менее, график на игровой площадке ECharts отображает данные (показывает столбцы).
Кто-нибудь знает, что может быть причиной этого?
Я знаю, что параметры диаграммы могут выглядеть немного необычно (например, я использую тип: «значение» для обеих осей, хотя одна из них может быть категориальной), но это всего лишь упрощенная версия того, чего я пытаюсь достичь. Моя цель — создать гистограмму с произвольным расстоянием между столбцами и произвольными цветами. Я следовал этому примеру диаграммы.





import { ref } from 'vue';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

use([GridComponent, BarChart, CanvasRenderer, VisualMapComponent])

const options = ref({
dataset: [
{
"source": [
{
"x": 0.3,
"value": 58.333333333333336,
"group": 0
},
{
"x": 1.1,
"value": 58.333333333333336,
"group": 1
}
]
}
],
xAxis: { type: 'value' },
yAxis: { type: 'value' },
visualMap: [
{
"type": "piecewise",
"dimension": 2,
"categories": [0, 1],
"inRange": { "color": ["#5470C6", "#91CC75"] },
"top": 10,
"right": 10
}
],
series: [
{
"type": "bar",
"datasetIndex": 0,
"encode": { "x": "x", "y": "value" }
}
],
grid: { top: 40, bottom: 25, left: 10, right: 10 },
});



Подробнее здесь: https://stackoverflow.com/questions/798 ... playground