[Vuejs]-Vue: vue-echarts not rendered

5👍

✅

<v-chart :options="chartOptionsBar"></v-chart>

I believe here should be option instead of options. According to the readme

👤daolanfler

[Vuejs]-Vue2 and composition api – cannot import store, error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

0👍

Solution

I Faced The Same Exact Problem .. the solution is you must use "GridComponent" from "echarts/components".. that to Give the chart x,y Axis..

The Final Code should be like this :

<script lang="ts">
import { use } from "echarts/core";
import { SVGRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { GridComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { provide, ref } from "vue";

export default {
  name: "BarChart",
  components: { VChart },
  setup() {
    use([SVGRenderer, BarChart, GridComponent]);

    provide(THEME_KEY, "dark");

    const option = ref({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    });

    return {
      option,
    };
  },
};
</script>

<template lang="pug">
.q
  v-chart(class="chart" :option="option")
</template>

<style scoped lang="sass">
.chart
  height: 300px
</style>