我正在使用 apexchart 库在Vue.js
散点图上绘制数据。我使用 Python 和 Flask 从后端获取数据。我能够从后端获取数据到前端,但是散点图没有显示任何内容,控制台上也没有错误。我的预期结果应该是包含我从后端获得的所有坐标值的散点图,即我的 .py 文件。
<template>
<div>
<div id="chart">
<apexchart type=scatter height=350 :options="chartOptions" :series="series" />
</div>
<div>
<p> {{ df }} </p>
</div>
</div>
</template>
<script>
import axios from 'axios';
import VueApexCharts from 'vue-apexcharts';
import Vue from 'vue';
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
export default {
data: function() {
return {
df: [],
chartOptions: {
chart: {
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 3,
},
yaxis: {
tickAmount: 3,
}
},
series: [{
name: 'series-1',
data: [[]]
}],
}
},
methods: {
getPoints() {
const path='http://localhost:5000/scatter';
axios.get(path)
.then((res) => {
this.df=res.data;
console.log(this.df)
})
.catch((error) => {
console.error(error);
});
},
},
created(){
this.getPoints();
},
};
</script>
#Backeend (.py file)
from flask import Flask, jsonify, request
from flask_cors import CORS
app = Flask(__name__)
app.config.from_object(__name__)
@app.route('/scatter',methods=['GET'])
def get_points():
return jsonify([[2, 3], [1, 5]])