Javascript Vue.js项目中未出现Apexcharts条形图

我正在尝试使用为我的vue.js站点创建一个图表，但是我的图表根本没有出现

-Apexcharts文档

HTML

  <div class="section sec2"> 
    <div id="chart"></div>
    {{chart}} <--failed attempt
  </div>
...

{{chart}编辑：此答案是在vue apexcharts包装器未发布时编写的。如果您正在寻找Vue与ApexCharts集成的更好示例，请查看


ApexCharts文档目前没有关于如何在Vue/React中使用它的示例，因此我将尝试提供一个在Vue.js中使用ApexCharts的简单演示

这里是HTML部分

<div id="app">
    <div id="chart" ref="barchart"></div>
</div>

ApexCharts只需要引用DOM元素，无论它是否在Vue/React中，都可以在屏幕上呈现图表。在上面的代码中，我通过这个引用了DOM元素。$refs

下面是我上面给出的示例的链接
编辑：这个答案是在vue apexcharts包装器未发布时编写的。如果您正在寻找Vue与ApexCharts集成的更好示例，请查看


ApexCharts文档目前没有关于如何在Vue/React中使用它的示例，因此我将尝试提供一个在Vue.js中使用ApexCharts的简单演示

这里是HTML部分

<div id="app">
    <div id="chart" ref="barchart"></div>
</div>

ApexCharts只需要引用DOM元素，无论它是否在Vue/React中，都可以在屏幕上呈现图表。在上面的代码中，我通过这个引用了DOM元素。$refs

这是我上面给出的示例的链接
我用你的代码替换了我的代码来修复它，它给了我一些错误，我添加了“从”Vue/dist/Vue.js“导入Vue”并修复了大部分错误，但现在它在下面的comentUncaught（承诺）中发布的chrome控制台中给了我这个错误TypeError:无法读取未定义工作的属性“firstChild”。谢谢你的回答救了我一命！我用你的代码替换了我的代码来修复它，它给了我一些错误，我添加了“import Vue from”Vue/dist/Vue.js”导入，它修复了大部分错误，但现在它在chrome控制台中给了我这个错误，该控制台发布在下面的comentUncaught（承诺）TypeError中：无法读取未定义工作的属性“firstChild”。谢谢你的回答救了我一命！
<div id="app">
    <div id="chart" ref="barchart"></div>
</div>

new Vue({
  el: '#app',
  mounted: function() {
    const chart = new ApexCharts(this.$refs.barchart, {
      chart: {
        type: 'bar',
        height: 400
      },
      series: [{
        name: 'sales',
        data: [30,40,45,50,49,60,70,91,125]
      }],
      xaxis: {
        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
      }
    })

    chart.render();

  }
});