Empty bar chart in Vue-ECharts despite working in ECharts playground

I have a simple template with a bar chart that doesn’t render properly in Vue-ECharts, even though the exact same options work fine in the ECharts playground. There are no console errors — the chart only shows the legend, but no bars in Vue-ECharts. However, the graph in the ECharts playground displays data (shows bars).

Does anyone know what might be causing this?

I know that the chart options might look a bit unusual (for example, I’m using type: "value" for both axes even though one could be categorical), but this is just a simplified version of what I’m trying to achieve. My goal is to create a bar chart with custom spacing between bars and custom colors. I was following this example chart.

<template>
    <v-chart :option="options" autoresize style="width: 100%; height: 100%" />
</template>

<script setup>
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 },
});
</script>

Posting this question — and thanks to @ninadepina’s comment — helped me pinpoint the issue.

The problem was that I hadn’t imported and registered the DatasetComponent. To fix it, just import it and include it in the use() array:

import { GridComponent, VisualMapComponent, DatasetComponent } from 'echarts/components';

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

I initially didn’t suspect this was the cause, since Vue-ECharts usually displays a warning when a required component is missing — but in this case, it was completely silent.