个人工作中遇到的echarts&layui&vue痛点
在标题前加图标
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+"
"+barName+":"+barValue+"
"+lineName+":"+lineValue;
return html;
}
}
鼠标移上显示内容自定义简写
tooltip: {//提示框组件
trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a}
{b} : {c}
百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
layui下拉框加可搜索
加一个 lay-search 即可输入
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
{{context}}
css
[v-cloak]{
display: none;
}
参考链接
视频加图轮播vant
html
![]()
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,
// 建议浏览器在