You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/09/09 06:20:14 UTC
[echarts-bar-racing] 01/02: feat: record video basic logic done
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-bar-racing.git
commit 984e2f79dd18798a90496eb300c91f0abe415423
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Sep 9 11:18:05 2021 +0800
feat: record video basic logic done
---
src/components/BBody.vue | 19 ++++++++-----------
src/components/BChart.vue | 26 +++++++++++++++++++++-----
2 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/src/components/BBody.vue b/src/components/BBody.vue
index b7a363d..1ad168f 100644
--- a/src/components/BBody.vue
+++ b/src/components/BBody.vue
@@ -1,5 +1,8 @@
<template>
- <div class="w-full h-full">
+ <div class="w-full h-full"
+ v-loading="isExportingVideo"
+ element-loading-text="视频生成中"
+ >
<div class="grid grid-cols-12 h-full text-sm">
<el-card class="box-card col-span-3">
<h1 slot="header" class="clearfix text-xl">
@@ -68,15 +71,6 @@
<el-button @click="download" type="primary">下载代码</el-button>
<el-button @click="downloadVideo">生成视频</el-button>
</el-form-item>
-
- <div class="grid grid-cols-3 form-row">
- <label class="col-span-1">视频生成中</label>
- <el-progress class="col-span-2"
- :text-inside="true"
- :stroke-width="20"
- :percentage="videoPercentage">
- </el-progress>
- </div>
</el-form>
</div>
</el-card>
@@ -122,7 +116,8 @@ export default defineComponent({
animationDuration: 3000,
width: 1280,
height: 720,
- videoPercentage: 40
+ videoPercentage: 40,
+ isExportingVideo: false
}
},
components: {
@@ -163,7 +158,9 @@ export default defineComponent({
},
async downloadVideo() {
+ // this.isExportingVideo = true;
const isSuccess = await (this.$refs.bchart as any).captureVideo(this.width, this.height);
+ // this.isExportingVideo = false;
if (!isSuccess) {
// this.$notify.error({
// title: '导出失败！',
diff --git a/src/components/BChart.vue b/src/components/BChart.vue
index f011be7..c0f83a2 100644
--- a/src/components/BChart.vue
+++ b/src/components/BChart.vue
@@ -37,6 +37,7 @@ const colorAll = [
];
const headerLength = 2;
let chart: echarts.ECharts;
+let time: number;
export default defineComponent({
name: 'BChart',
@@ -62,6 +63,7 @@ export default defineComponent({
methods: {
run() {
this.doResetChart();
+ time = Date.now();
this.doRun();
},
@@ -87,11 +89,25 @@ export default defineComponent({
this.doResetChart(width, height);
const canvas = chart.getDom().children[0].children[0] as HTMLCanvasElement;
const recorder = canvasRecord(canvas);
+ time = Date.now();
+
+ recorder.start();
+
+ this.doRun(() => {
+ let hasError = false;
+ try {
+ recorder.stop();
+ }
+ catch (e) {
+ console.error(e);
+ hasError = true;
+ }
- this.doRun(5000, () => {
- recorder.stop();
this.isHidden = false;
- resolve(true);
+ setTimeout(() => {
+ this.run();
+ });
+ resolve(hasError);
});
}
catch (e) {
@@ -175,7 +191,7 @@ export default defineComponent({
chart.setOption(option as echarts.EChartsOption, true);
},
- doRun(timePadding?: number, onCompleted?: Function) {
+ doRun(onCompleted?: Function) {
const dataCnt = this.chartData.length - headerLength - 1;
const that = this;
for (let i = 0; i < dataCnt; ++i) {
@@ -198,7 +214,7 @@ export default defineComponent({
});
that.removeTimeoutHandlers(timeout);
if (i === dataCnt - 1 && typeof onCompleted === 'function') {
- setTimeout(onCompleted, timePadding);
+ setTimeout(onCompleted, that.animationDuration);
}
};
timeout = window.setTimeout(timeoutCb, i * that.animationDuration);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org