一、vue样式穿透
1.stylus的样式穿透 使用：（>>>）
外层类 >>> 想要修改的类名 { 要修改的样式}例：.wrapper>>>.el-card__header{
border-bottom: none
}
2.sass和less的样式穿透 使用：（/deep/）
外层类/deep/想要修改的类名 {
要修改的样式}例：.wrapper/deep/.el-card__header {
border-bottom: none}
3.通用样式穿透 使用：（::v-deep）
::v-deep想要修改的类名 {
要修改的样式}例：::v-deep.el-card__header {
border-bottom:none
}
二、echarts图表的使用
1.echarts图表自适应和缩放
series: [{//系列列表,通过type决定自己的图表类型
name: ‘中国‘,
zoom:1.2, --缩放比例
}]
window.onresize = myChart.resize; --移动端适配
2.echarts图表文字太长如何换行
在series:里面的label中，添加formatter方法
方法一：formatter(v){
lettext = v.name
returntext.length <4
?text :`${text.slice(0,4)}\n${text.slice(4)}`
}复制代码
方法二： formatter(x) {
var strs = x.data.name.split('');//字符串数组
var str =''
for(var i =0, s; s = strs[i++];) {//遍历字符串数组
str += s;if(!(i %4)) str +='\n';//按需要求余
}returnstr
},
3.v-charts柱状图表的配置
legend-position="bottom" 配置顶部的位置的属性
图表配置
chartExtend:{
legend:{
show:true,
bottom:"bottom",
selectedMode:false//去掉图例上的点击事件
},
color:["#3571FF"],
series:{
barWidth:15
},
tooltip :{//在tooltip中添加axisPointer:{type:'none'}可以去除指示线。
trigger:'axis',
axisPointer:{
type:'none'
}
},
grid:{//Echarts如何调整legend和图表的间距
top:'10%',
bottom:'15%'
}
}
4.环形图表配置
saffData: {
title:'', --图表顶部标题
columns: ['活期存款','数量'],
rows: [
{'活期存款':'活期存款','数量':20},
{'活期存款':'基金','数量':15},
{'活期存款':'定期存款','数量':15},
{'活期存款':'理财','数量':30},
{'活期存款':'股金','数量':20},
],daymoney:'100',
cunmoney:'300',
tsmoney:'200',
sunum:'180',
ranking:'7'
},chartExtend:{
legend: {
show:true,
bottom:"bottom",
selectedMode:true,
width:"100%",
icon:"circle",
x:"center",
y:"bottom",
textStyle: {
color:"#8C8C8C"
} },color: ["#FFCA1A","#28CCB4","#3571FF","#E54D4D","#B190F0"],
tooltip: {
trigger:'item',
formatter:function(parms){
varstr =
parms.marker +''+
parms.data.name +'</br>'+
'数量：'+
parms.data.value +'</br>'+
'占比：'+
parms.percent +'%';
returnstr
} }, },chartSetting: {
hoverAnimation:true,
radius: [40,70],
offsetY:90
},
三、vue点击事件判断执行
添加产品
clickFlag ---的状态为true addGoodsHandler点击事件才执行，否则不执行
四、vue的插槽solt如何使用
如一个公共组件的外层壳子相同，但是中间的内容不同，可以在父组件里自定义内容， 然后在子组件里用solt进行接收 如父组件
<!--【1】首先把child写成双标签样式，把要插入的内容放双标签中间-->
插入子组件的内容
复制代码
子组件
子组件
