在标题前加图标
title: {
text: ['{a| 标题内容}'],
left: '20',
top: '10',
textStyle: {
//文字颜色
color: '#fff',
//字体大小
fontSize: 18,
rich: {
a: {
height: 20,
width: 20,
fontSize: 18,
backgroundColor: {
image: '/xxx/xxx/xxx/xxx.png',
}
},
}
},
},
柱状图y轴刻度线
splitLine:{
lineStyle:{
color: '#85cdff'
}
}
有滚动条时默认显示条数
//默认显示10条数据（当数据多余10条时）s
if(data1.length >10 ){
var dataZoom_start = (10/data1.length)*100;
}else{
var dataZoom_start = 100;
}
滚动条要既想显示又能拖拽
dataZoom: [
{
// type: 'slider',//滚动条显示
type: 'inside',//滚动条不显示
start: dataZoom_start,
end: 0,
zoomLock:true,
show: true,
yAxisIndex: [0],
},{
zoomLock:true,
show: true,
yAxisIndex: [0],
left: '97%',
start: dataZoom_start,
end: 0,
moveOnMouseMove:true,
top: '12%',
width:10,
backgroundColor:'#1e3e79',
fillerColor:'#007eff',
textStyle: {
fontSize: 10,//字体大小
color: '#85cdff'//字体颜色
},
}
],
柱状图柱体颜色及圆角
itemStyle: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [10, 10, 5, 5],
//一开始时颜色
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#00c3b8'},//上
// {offset: 0.5, color: '#188df0'},
{offset: 1, color: '#0088d3'},//下
]
)
},
emphasis: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [10, 10, 5, 5],
//鼠标移上柱体变换颜色
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0088d3'},
// {offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#00c3b8'}
]
)
}
},
饼状图的legend与series内容不同-----series的label的自定义
legend: {
orient: 'vertical',
top: 30,
right: 20,
data: urgentList,
left: 'left',
textStyle: {
color: '#488ED5'//字体颜色
},
},
series: [
{
label: {
normal: {
show: true,
formatter: function (params) {
return params.data.label;
}
}
},
}]
鼠标移上显示内容自定义
tooltip: {
formatter: function() {
var params = arguments[0];
var name=params[0]['name'];
var barName = params[0]['seriesName'];
var barValue = params[0]['value'];
var barColor = params[0]['color']['colorStops'][0]['color'];
var lineName = params[1]['seriesName'];
var lineValue = params[1]['value']+"%";
var lineColor = params[1]['color'];
var html = name+"<br/><span style='display:inline-block;width:10px;height:10px;border-radius:5px;background: "+barColor+"'></span>"+barName+":"+barValue+"<br/><span style='display:inline-block;width:10px;height:10px;border-radius:5px;background: "+lineColor+"'></span>"+lineName+":"+lineValue;
return html;
}
}
鼠标移上显示内容自定义简写
tooltip: {//提示框组件
trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
layui下拉框加可搜索
加一个 lay-search 即可输入
<select name="xxxx" id="xxxx" lay-filter="xxxx" lay-search>
</select>
layer 2层弹出，第2层弹出到1层的父级上，且关闭自身
参考链接（layui框架–子页面弹出框layer显示在父页面上面）
parent.layer.open({
type: 2,
title: false,
closeBtn: 0,
resize: false,
area: ['1251px', '830px'], //宽高
offset: ['0px', '0px'],
btn: ['关闭'],
btnAlign: 'c',
shadeClose: true,
shade: 0.000001,
yes: function (index, layero) {
parent.layer.close(index);
},
content: "{:url('getLivelihoodDetail')}" + "?id=" + id,
});
x,y轴文字倾斜
axisLabel: {
interval:0,
rotate:40
}
x轴文字折行
axisLabel: {
interval: 0,
// 折行显示的函数
formatter: (params) => {
let newParamsName = '';
const paramsNameNumber = params.length;
const provideNumber = 10; // 一行显示几个字符
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = '';
const start = p * provideNumber;
const end = start + provideNumber;
if (p === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
},
vue的v-cloak 指令
用于解决屏幕闪动
html
<div id="app" v-cloak>
{{context}}
</div>
css
[v-cloak]{
display: none;
}
视频加图轮播vant
html
<van-swipe :autoplay="autoplayTime" :height="swipeHeight" @change="onChange">
<!-- 视频 -->
<van-swipe-item v-if="videoShow">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
customEventName="customstatechangedeventname"
@pause="onPlayPause()" @play="onPlayPlay()" @ended="onPlayEnded($event)">
</video-player>
</van-swipe-item>
<van-swipe-item v-for="(image, index) in banner" :key="index">
<img v-if="image.type!=1005" v-lazy="image.url" @click="onPreviewAvatar()" onload="onWidthHeight(this.width,this.height,this)"/>
</van-swipe-item>
<template #indicator>
<div class="custom-indicator">
<van-icon name="eye-o"/>
{{ current + 1 }}/{{currentNum}}
</div>
</template>
</van-swipe>
js
Vue.use(vant.Lazyload, {
lazyComponent: true
});
Vue.use(window.VueVideoPlayer);//加载视频播放组件
new Vue({
el: '#app',
data: {
id: "{$id}",
// 轮播图
banner: [],
current: 0,
autoplayTime: 3000,
swipeHeight: 240,
currentNum: 0,
show: false,
local: "{$local}",
btnFlag: false,//返回顶部
imageEvaluatePreview: {
images: []
},
forecastsList: [],
dayName: ['今天', '明天', '后天'],
isVideo: "{$sliderVideo['url']}",
videoShow: false,
playerOptions: {
//播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
//如果true,浏览器准备好时开始回放。
autoplay: true,
// 默认情况下将会消除任何音频。
muted: true,
// 导致视频一结束就重新开始。
loop: false,
// 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
preload: 'auto',
language: 'zh-CN',
// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
// aspectRatio: '16:13',
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
// fluid: true,
width: 0,
height: 0,
sources: [{
//类型
type: "video/mp4",
//url地址
src: ''
}],
//你的封面地址
poster: '',
//允许覆盖Video.js无法播放媒体源时显示的默认信息。
notSupportedMessage: '此视频暂无法播放，请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
//全屏按钮
fullscreenToggle: true
}
},
screenWidth: document.body.clientWidth,//body宽
swiper_new_media: 0, //swiper块高
video_pause: 0, //判断滑动块位置是不是video
videoType: true //这里判断滑动块是video界面时的视频状态（暂停、播放）
},
created: function () {
var that = this;
setTimeout(function () {
//启动轮播
that.autoplayTime = 3000;
}, 500);
if (that.isVideo != "") {
//如果有视频则显示
that.videoShow = true;
//有视频停止轮播
that.autoplayTime = 0;
that.swiper_new_media = that.screenWidth * 1;//swiper块高和body宽比例取值
//-----------------------修改视频参数------------------------------------
that.playerOptions['width'] = that.screenWidth;
//修改data里playerOptions数组里面的视频宽width
that.playerOptions['height'] = that.swipeHeight;
//修改data里playerOptions数组里面视频高height
that.playerOptions['sources'][0]['src'] = that.isVideo;
// that.playerOptions['poster'] = "xxxxxxx"; //给视频赋第一张图
}
},
mounted() {
window.addEventListener('scroll', this.scrollToTop);
this.getBannerList();
this.getTagList();
this.getTabList();
this.getTicketList();
this.getActivityList();
this.getStrategyList();
this.onWeather();
this.onPlayPlay();
},
destroyed() {
window.removeEventListener('scroll', this.scrollToTop);
},
methods: {
//轮播
getBannerList() {
let that = this;
this.$http.post('{:url("getBannerList")}', {'id': that.id}).then(function (res1) {
that['banner'] = res1.body.data['bannerList'];
if (that.isVideo == "") {
that['currentNum'] = res1.body.data['current'];
} else {
that['currentNum'] = res1.body.data['current'] + 1;
}
}).catch((res) => {
vant.Toast.fail('发生错误！');
});
},
showPopup() {
this.show = true;
},
//轮播视频
onChange: function (index) {
//swiper切换
var that = this;
that.current = index;
if (that.isVideo != "") {
var myVideo = document.getElementsByTagName('video')[0];
if (index === 0) {
that.video_pause = 0;
//当在0（视频）处，赋值为0，其他地方赋值为1，为了后面判断切换状态
if (myVideo.currentTime > 0) {
//判断视频是否被点击观看
if (that.videoType == true) {
//判断之前离开video滑块时是否暂停播放
myVideo.play();
} else {
return;
}
}
} else {
that.video_pause = 1;
myVideo.pause();
}
}
},
onPlayPause: function () {
var that = this;
if (that.video_pause == 0) {
that.videoType = false; //赋值视频已暂停
that.autoplayTime = 3000;
}
},
onPlayPlay: function () {
var that = this;
if (that.video_pause == 0) {
that.autoplayTime = 0;
that.videoType = true; //赋值视频已播放
}
},
onPlayEnded: function () {
if (document.fullscreenElement) {
//判断当前视频已经播放结束
player.exitFullscreen(); //强制退出全屏，恢复正常大小
}
}
}
});
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
