153 lines
3.8 KiB
Vue
153 lines
3.8 KiB
Vue
<template>
|
|
<div style="width: 1300px; height: 600px">
|
|
<div id="chart" style="width: 100%; height: 100%; min-width: 500px"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
data() {
|
|
return {
|
|
countDownTime: 60,
|
|
timer: null,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
let base = +new Date(1968, 9, 3);
|
|
let oneDay = 24 * 3600 * 1000;
|
|
let date = [];
|
|
let data = [Math.random() * 300];
|
|
for (let i = 1; i < 20000; i++) {
|
|
var now = new Date((base += oneDay));
|
|
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
|
|
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
|
}
|
|
|
|
// 添加 10 个空数据在前后
|
|
for (let i = 0; i < 100; i++) {
|
|
date.unshift(null);
|
|
data.unshift(null);
|
|
}
|
|
for (let i = 0; i < 100; i++) {
|
|
date.push(null);
|
|
data.push(null);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
position: function (pt) {
|
|
return [pt[0], "10%"];
|
|
},
|
|
},
|
|
title: {
|
|
left: "center",
|
|
text: "Large Area Chart",
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: "none",
|
|
},
|
|
restore: {},
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
// boundaryGap: [0.5, 0.5],
|
|
data: date,
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
boundaryGap: [0, "100%"],
|
|
axisLine: {
|
|
show: true, // 显示 Y 轴线条
|
|
},
|
|
},
|
|
{
|
|
position: "right",
|
|
type: "value",
|
|
boundaryGap: [0, "100%"],
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 10,
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 10,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "Fake Data",
|
|
type: "line",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: "rgb(255, 70, 131)",
|
|
},
|
|
data: data,
|
|
},
|
|
],
|
|
};
|
|
this.myChart = echarts.init(document.getElementById("chart"));
|
|
this.myChart.setOption(option);
|
|
window.addEventListener(
|
|
"resize", () => {
|
|
if (this.myChart) this.myChart.resize();
|
|
}
|
|
);
|
|
},
|
|
methods: {
|
|
//初始化图表
|
|
inCharts() {
|
|
if (this.myChart == null) {
|
|
this.myChart = echarts.init(document.getElementById("chart"));
|
|
}
|
|
|
|
this.option.series[0].name = this.$t(`home.computingPower`);
|
|
this.option.series[1].name = this.$t(`home.currencyPrice`);
|
|
|
|
this.myChart.setOption(this.option);
|
|
// 回调函数，在渲染完成后执行
|
|
this.myChart.on("finished", () => {
|
|
// 在这里执行显示给用户的操作
|
|
// console.log('图表渲染完成，显示给用户');
|
|
this.minerChartLoading = false;
|
|
});
|
|
// window.addEventListener("resize", () => {
|
|
// if (this.myChart) this.myChart.resize();
|
|
// });
|
|
|
|
window.addEventListener(
|
|
"resize",
|
|
throttle(() => {
|
|
if (this.myChart) this.myChart.resize();
|
|
}, 200)
|
|
);
|
|
},
|
|
startCountDown() {
|
|
this.timer = setInterval(() => {
|
|
if (this.countDownTime <= 0) {
|
|
//当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
|
|
clearInterval(this.timer);
|
|
sessionStorage.removeItem("exam_time");
|
|
alert("提交试卷");
|
|
} else if (this.countDownTime > 0) {
|
|
//每秒让countDownTime -1秒,并设置到sessionStorage中
|
|
this.countDownTime--;
|
|
window.sessionStorage.setItem("exam_time", this.countDownTime);
|
|
}
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</script> |