我正在尝试使用Apexcharts为我的 vue.js 站点创建图表，但是我的图表根本没有出现。
-Apexcharts 文档在这里
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(); …我有 2 个链接到同一页面（定义页面）但具有不同 id 的路由器链接，在我的定义页面中，我有一个 if else 循环来检查 id，然后发布该 id 的适当定义。我的问题是我的循环无法正确读取我的 ID 并直接转到我的 else 语句，这是我让它工作的最接近的状态。
我在第 1 页中的 2 个路由器链接
<router-link :to="{ path: '/Pulse/Definition',id:'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
<router-link :to="{ path: '/Pulse/Definition'}" id="Trust" append><a >Read more ></a></router-link>
我的定义页面
<template>
<div class="PulseDefinition page row">
<h2 v-if=" id=='Alignment'">hello world {{id}}</h2>
<h2 v-else-if=" id=='Trust'">hello world {{id}}</h2>
<h2 v-else>Sorry try again</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.PulseDefinition{
margin-top:2.5rem;
margin-left:3rem;
background-color: aquamarine;
width:50rem;
height:50rem;
}
</style>
路由器
import Vue …我尝试添加％在我Apexcharts提示后ÿ值。我正在使用vue.js哪个apexchart没有提供官方文档。但我让它正常工作。这是我到目前为止所拥有的：
data: function () {
return {
apex: null
}
},
// this is the code that handles the chart, there is no official documentation for apexcharts with vue.js but there is with javascript
//https://apexcharts.com/docs/installation/
methods: {
init: function() {
this.apex = new ApexCharts(this.$refs.barchart, {
chart: {
type: 'line',//defines the type of chart
height:400,
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 50
},
dynamicAnimation: …