Vue使用vue

Vue使用vue

vue-apalyer

• 一、npm安装依赖
• 二、引入插件
• 三、组件使用
• 四、完整页面，我自己的，仅供参考

一、npm安装依赖

npm install vue-aplayer --save

二、引入插件

import aplayer from "vue-aplayer";components: {aplayer: aplayer},

三、组件使用

<template><div id="aplayerDiv"><vue-scroll :ops="ops" class="vueScroll"><aplayer autoplay :music="{title: '剑心',artist: '张杰',src: '/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',pic: '==/29686813955450.jpg'}" :list="musicList"></aplayer></vue-scroll></div>
</template>

标签中使用的音频数据，用一下别人的，我没上传音乐到服务器，后面有空传两首

 musicList: [{title: '白羊',artist:'徐秉龙',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163049336667.jpg',},{title: '说谎',artist: '林宥嘉',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163187404137.jpg',}]

四、完整页面，我自己的，仅供参考

<!-- 可视化demo1 -->
<template><div class="charts"><div id="demo1Chart1" :style="{width: '500px', height: '300px'}"></div><div id="demo1Chart2" :style="{width: '500px', height: '300px'}"></div><div id="demo1Chart3" :style="{width: '500px', height: '300px'}"></div><div id="demo1Chart4" :style="{width: '500px', height: '300px'}"></div><div id="aplayerDiv"><vue-scroll :ops="ops" class="vueScroll"><aplayer autoplay :music="{title: '剑心',artist: '张杰',src: '/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',pic: '==/29686813955450.jpg'}" :list="musicList"></aplayer></vue-scroll></div></div>
</template><script>
require("echarts-wordcloud");
require("echarts-liquidfill");
require('../../assets/data/china')  //引入china.js地图文件
import echartMapData from "../../assets/data/EchartMapData"//引入map数据
import aplayer from "vue-aplayer";
export default {data () {return {ops: {vuescroll: {},scrollPanel: {},rail: {keepShow:true},bar: {hoverStyle: true,onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条background: 'green',//opacity: 0.5,//滚动条透明度"overflow-x": "hidden"}},musicList: [{title: '白羊',artist:'徐秉龙',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163049336667.jpg',},{title: '说谎',artist: '林宥嘉',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163187404137.jpg',},{title: '成都',artist: '赵雷',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/2946691234868155.jpg'},{title: '陪你到底',artist: '许华升',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163693319625.jpg',},{title: '广东爱情故事',artist: '雨神',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/109951163189947600.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',},{title: '烟火里的尘埃',artist: '华晨宇',src: "/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",pic: '==/6672936069046297.jpg',}]};},components: {aplayer: aplayer},computed: {},mounted() {this.drowWorldCloud()window.addEventListener('resize', () => {size();});},created() {},methods: {drowWorldCloud(){let myChart1 = this.$echarts.ElementById('demo1Chart1'))let myChart2 = this.$echarts.ElementById('demo1Chart2'))let myChart3 = this.$echarts.ElementById('demo1Chart3'))let myChart4 = this.$echarts.ElementById('demo1Chart4'))myChart1.setOption({backgroundColor:'#fff',tooltip: {pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"},series: [{type: "wordCloud",gridSize: 2,shape: "circle",// shape: 'pentagon',sizeRange: [12, 50],// rotationRange: [-90, 90],// width: 600,// height: 300,left: "center",top: "center",width: "70%",height: "80%",right: null,bottom: null,drawOutOfBound: false,textStyle: {normal: {fontFamily: "sans-serif",fontWeight: "bold",color: function() {return ("rgb(" +[und(Math.random() * 160),und(Math.random() * 160),und(Math.random() * 160)].join(",") +")");}},emphasis: {shadowBlur: 10,shadowColor: "#333"}},data: [{name:"活着", value:2352}, {name:"追风筝的人", value:123}]}]});myChart2.setOption({series: [{type: 'liquidFill',data: [0.6]}]});myChart3.setOption(echartMapData),window.addEventListener('resize', () => {// 自动渲染size();})myChart4.setOption({title: {text: '某站点用户访问来源',subtext: '纯属虚构',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});}}
}
</script>
<style scoped>.charts{width: 1010px;height: 650px;display: flex;flex: 1;flex-wrap: wrap;}#demo1Chart1{border: solid 1px #eea7ba;}#demo1Chart2{border: solid 1px #eea7ba;}#demo1Chart3{border: solid 1px #eea7ba;}#demo1Chart4{border: solid 1px #eea7ba;}#aplayerDiv{border: solid 1px #eea7ba;height: 600px;width: 330px;position: relative;left: 1005px;top: -605px;}#aplayerDiv .vueScroll{height: 600px !important;}
</style>