Question

我试图使用Apexcharts为我的vue.js网站创建一个图表，但是我的图表根本没有出现。

-Apexcharts文档Here

HTML

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

JavaScript

<script>
import ApexCharts from 'apexcharts'
export default {
  // name: 'HelloWorld',
  props: {//////////this is how i use global variable with vue.js///////////////
    width:{           type: String, default: function(){return('width:')}},
  }
}
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30,40,45,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

CSS

<style>
  @import '../assets/style/sec.css';
#chart {
  max-width: 650px;
  margin: 35px auto;
}

</style>

我尝试通过将“ var option = ...”变成“ option：...”来使用vue.js全局变量，但这只给了我一个错误。

我非常确定它可以显示在带有“ #chart” ID的div中

非常感谢您的帮助和建议。

Answer 1

编辑：未发布vue-apexcharts包装器时，写了此答案。如果您正在寻找有关与ApexCharts进行Vue集成的更好示例，请查看https://github.com/apexcharts/vue-apexcharts

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

这是HTML部分

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

这是JS部分

new Vue({
  el: '#app',
  mounted: function() {
    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]
      }
    }).render()
  }
});

ApexCharts仅需要引用DOM元素，无论它在Vue / React中是用于在屏幕上呈现图表。在上面的代码中，我通过this。$ refs引用了DOM元素。创建这些图表的一种更好的方法是将库本身包装在一个组件中，然后使用它。

我将在单独的GitHub存储库中添加Vue / React的包装，以使其易于使用这些库。

这是我上面给出的示例的codepen链接

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

1 个答案: