Empty bar chart in Vue-ECharts despite working in playground

[PrimozGodec]

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.

Does anyone know what might be causing this?

I realize 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.

<template>
  <v-col cols="12" md="6" lg="4">
    <v-card style="height: 320px;" class="d-flex flex-column">
      <v-card-text class="d-flex flex-column">
        <div class="flex-grow-1 overflow-auto chart-container">
          <v-chart :option="options" autoresize style="width: 100%; height: 100%" />
        </div>
      </v-card-text>
    </v-card>
  </v-col>
</template>

<script setup>
import { ref, toRef } from 'vue';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TitleComponent, VisualMapComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { chartColors } from '@/helpers/colors'

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

const props = defineProps({
  data: Object,
  index: String,
  colors: Object,
})
const emit = defineEmits(['threshold'])

const options = ref({
  dataset: [
        {
            "source": [
                {
                    "x": 0.3,
                    "value": 58.333333333333336,
                    "group": 0
                },
                {
                    "x": 1.1,
                    "value": 58.333333333333336,
                    "group": 1
                }
            ]
        }
    ],
  xAxis: {
      type: 'value',
      axisLabel: {show: false},
      axisTick: {show: false},
  },
  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>

Here is the example of an empty chart made using Vue-ECharts:

And how it looks like on EChart playground (same options):

[PrimozGodec]

To answer my own question. 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.

[Justineo]

I think you may want to try our import code generator.

[PrimozGodec]

Thank you for the suggestion. :)