<template>
<div class="chart-container">
<div id="chart1"></div>
</div>
</template>
<script>
import { Chart } from "@antv/g2";
var datas = [];
let chart;
export default {
name: "Charts",
data() {
return {
datas: [],
// timer: "",
};
},
mounted() {
this.initChart();
setInterval(this.inputdata, 1000);
},
methods: {
initChart() {
chart = new Chart({
container: "chart1",
height: 300,
width: 400,
});
chart.data(this.datas, {
time: {
alias: "時間",
type: "time",
mask: "MM:ss",
tickCount: 10,
nice: false,
},
temperature: {
alias: "平均溫度",
min: 10,
max: 35,
},
type: {
type: "cat",
},
});
chart
.line()
.position("time*temperature")
.color("type", ["#ff7f0e", "#2ca02c"])
.shape("smooth")
.size(2);
chart.render();
},
},
inputdata() {
var now = new Date();
var time = now.getTime();
var temperature1 = ~~(Math.random() * 5) + 22;
var temperature2 = ~~(Math.random() * 7) + 17;
if (this.datas.length >= 200) {
this.datas.shift();
this.datas.shift();
}
this.datas.push({
time: time,
temperature: temperature1,
type: "記錄1",
});
this.datas.push({
time: time,
temperature: temperature2,
type: "記錄2",
});
chart.changeData(this.datas);
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/9089.html
標籤：JavaScript
上一篇：問個很基礎的html問題