Vue: vue-echarts 未渲染

Question

我正在使用 vue-echart 和 Vue 2 创建一个简单的条形图。我想在我的主页 Comp1.vue 中显示一个条形图，App.vue。

App.vue

<template>
  <div id="app">
    <Comp1/>
  </div>
</template>

<script>
import Comp1 from './components/Comp1.vue'

export default {
  name: 'App',
  components: {
    Comp1
  }
}
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueECharts from "vue-echarts";
import "@vue/composition-api";
import "echarts";

Vue.config.productionTip = false

Vue.component("v-chart", VueECharts);

new Vue({
  VueECharts,
  render: h => h(App),
}).$mount('#app')

Comp1.vue

<template>
<div style="height: 300px;">
    <v-chart :options="chartOptionsBar"></v-chart>
    Yes
</div>
</template>

<script>
export default {
  name: 'Comp1',
  data() {
      return {
        chartOptionsBar: {
        xAxis: {
            data: ['Latte', 'Espresso', 'Mocha', 'Cappucino']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            type: 'bar',
            data: [100, 50, 25, 10]
            }
        ]
        }
      }
  }
}
</script>

<style scoped>
</style>

我已经导入了所有可能的依赖项，但图表没有呈现。我不知道这怎么会发生。我应该如何解决这个问题才能呈现图表？

Answer 1

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

我相信这里应该是选项而不是选项。根据 readme

Vue: vue-echarts 未渲染

Vue: vue-echarts not rendered

javascript

vue.js

vuejs2

echarts