<template>
<div>
<div class="mv">
<!-- 视频,如果加了autoplay就是自动播放,controls表示有进度条-->
<video id="videoPlayer" :enable-progress-gesture="false" @canplay="getVidDur()" controls src="http://localhost:8088/getVideo/video"/>
</div>
<div>
<button @click="change()">跳转到19秒</button>
<button @click="change2()">跳转到5秒</button>
<button @click="change3()">跳转到32秒</button>
</div>
<br><br>
<div class='map' style="height: 400px;width: 600px;"></div>
<!--下面这个可以看到返回的内容是啥-->
<!-- <div style="height:40px;width:100%;display: flex;justify-content: center;align-items: center;text-align: center;">
<span id="lable" style="font-size: 20px;color: red;"></span>
</div>-->
</div>
</template>
<script>
import axios from 'axios'
import * as echarts from "echarts";
import request from "@/services/request";
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
var video = () => {
var videoTime = document.getElementById("videoPlayer");
console.log("video的方法获取时长"+videoTime.duration); //获取视频时长
console.log("video的方法获取当前进度"+videoTime.currentTime); //获取视频当前播放时间
};
export default {
name: "fourthVue",
data() {
return {
i: "",
cu: "",
mvUrl: "",
xData: ['2.645', '7.84651', '9.4851', '20.495', '25.41655', '34.8416', '40.5615', '43.8156'].map(function (str) {//横坐标按空格换行
return str.replace(' ', '\n');
}),
yData1: [88, 92, 63, 77, 94, 80, 72, 86],
yData2: [80, 90, 60, 70, 90, 70, 62, 76],
}
},
mounted() {
this.initCharts();
},
methods: {
getVidDur() {
video();
},
change(){
var videoTime = document.getElementById("videoPlayer");
videoTime.currentTime="19.36919";
},
change2(){
var videoTime = document.getElementById("videoPlayer");
videoTime.currentTime='5.1651';
},
change3(){
var videoTime = document.getElementById("videoPlayer");
videoTime.currentTime=32.54554;
},
initCharts() {
/*这种只可以刚开始就获取视频时长，也就是说不可以中途获取当前时长*/
setTimeout(()=>{
this.i=document.getElementById('videoPlayer').duration
console.log("视频时长"+this.i);
},800);
// 基于准备好的dom，初始化echarts实例
let box1 = document.querySelector('.map')
// 使用init方法,初始化echarts的实例
let myCharts1 = echarts.init(box1)
var devnum;
// 设置配置项
myCharts1.setOption({
animationDuration: 2350,/*控制显示时间*/
title:{
text:'数据显示',
textStyle:{
color:'black'
},
subtext:'折线图',
subtarget:'blank',
/*副标题跳转链接*/
sublink:'https://www.baidu.com',
/*边框粗细*/
/*borderWidth:2,*/
left:10
},
xAxis:{
type:'category',//类目轴
data:this.xData, //类目轴数据
boundaryGap:false, //设置x第一个节点值,从y轴开始,true是默认有间距
triggerEvent:true,
},
yAxis:{
type:'value', //type='value'不需要设置data,会根据series中的数据显示
scale:true, //让y轴的值不从0开始
splitNumber:5, //坐标轴分割的段数,只是预估值,会根据实际值的可读程度而改变
minInterval:10, //坐标轴的最小刻度尺单位,会被splitNumber分割成的刻度而影响
maxInterval: 10 //坐标轴的最大刻度尺单位,强制限定
},
series:[
{
name:'数据',
type:'line', //数据显示方式,bar柱状图
data:this.yData1, //y轴数据和鼠标放上显示内容
stack:'all', //stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免重叠
/* markPoint:{ //标记点,可以标记最大值和最小值以及任意点
data:[
{
type:'max',
name:'最大值',
},{
type:'min',
name:'最小值'
},
{
type:'average',
name:'平均值'
}
]
},
markLine:{ //标注线，这里是标平均值,
// 也可以把average变成max,这样显示的就是最大值的横线
data:[
{
type:'average',
name:'平均值'
}
]
},
markArea:{ //标志指定区间阴影
data: [
/!*这里是x轴的区间，张三和彭万里宽度加上阴影*!/
[
{
name:'x轴区间',
xAxis:'7.84651',
},
{
xAxis: '20.495',
}
],
/!*这里是y轴的区间，60-80分的y轴区间加上阴影*!/
[
{
name: '60分到80分',
yAxis: 60
},
{
yAxis: 80
}
],
]
},*/
smooth:true,//为true是不支持虚线的，实线就用true
lineStyle:{ //波浪线线条样式
color:'purple',
/*虚线*/
type:'dashed'
},
/* areaStyle:{ //绘制线条对应的到x轴的区域面积颜色
color:'orange'
},*/
label:{ //波浪线数值标签
show:true, //每个柱显示y轴对应值
rotate:60,
/*数字位置*/
position:'outside'
},
barWidth:20,
},
{
name:'其他',
data:this.yData2,
type:'line',
stack:'all',
label:{
show:true
}
}
],
tooltip:{
show:true,
trigger:'axis',//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据
showContent:true,
formatter: '{a}: {b}({c})' //自定义提示框显示内容
},
toolbox:{ //使视图带有导出图片，数据视图，动态类型切换，数据区域缩放，重置
show:true,
showTitle:true,
feature:{ //开启功能
saveAsImage:{}, //可以导出下载
dataView:{}, //切换成数据视图
restore:{}, //重置
dataZoom:{}, //区域缩放
magicType:{ //动态类型切换
type:['bar','line']
}
}
},
// 设置折线上圆点大小
symbolSize:10,
// 设置拐点为实心圆
symbol:'circle',
legend:{
data:['成绩','其他成绩'],
}
});/*这里结束myCharts1这个方法*/
//点击x轴线,获取当前的横坐标
myCharts1.getZr().on('click', params => {
const pointInPixel = [params.offsetX, params.offsetY]
if (myCharts1.containPixel('grid', pointInPixel)) {
/*这里是获取点击的下标*/
let xIndex = myCharts1.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
var videoTime = document.getElementById("videoPlayer");
videoTime.currentTime=this.xData[xIndex]
console.log("当前定位:"+this.xData[xIndex]);
console.log(xIndex);
}
}),
//点击事件
myCharts1.on('click', function(params) {
// console.log(params) 之前把空格替换成换行符了，现在展示还原一下即可params.name.replace('\n', ' ')
devnum = "时间：" + params.name.replace('\n', ' ');
var videoTime = document.getElementById("videoPlayer");
/*下面这种写法是可以的,但是换成 videoTime.currentTime=devnum的写法就不行*/
videoTime.currentTime=params.name.replace('\n', ' ');
console.log("当前定位:"+videoTime.currentTime);
/*这里可以用来测试devnum是否获取成功*/
/*document.getElementById("lable").innerText = devnum;*/
});
},/*这里结束initCharts这个方法*/
},
}
</script>
<style>
.fourth{
margin-top: 10%;
}
.mv video{
height: 40%;
width: 40%;
}
</style>
echarts图表与播放器video联动
猜你喜欢
转载自blog.csdn.net/weixin_45898996/article/details/128254344
今日推荐
周排行