vue常见问题,样式穿透,e-charts图表使用等__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
一、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){
let text = v.name
return text.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'; //按需要求余
}
return str
},
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) {
var str =
parms.marker +
'' +
parms.data.name +
'</br>' +
'数量:' +
parms.data.value +
'</br>' +
'占比:' +
parms.percent +
'%';
return str
}
},
},
chartSetting: {
hoverAnimation: true,
radius: [40, 70],
offsetY: 90
},
三、vue点击事件判断执行
<div @click="clickFlag && addGoodsHandler()">
添加产品
</div>
clickFlag —的状态为true addGoodsHandler点击事件才执行,否则不执行
四、vue的插槽solt如何使用
如一个公共组件的外层壳子相同,但是中间的内容不同,可以在父组件里自定义内容, 然后在子组件里用solt进行接收 如父组件
<Child><!--【1】首先把child写成双标签样式,把要插入的内容放双标签中间-->
<p>插入子组件的内容</p>
</Child>
子组件
<div class="child">
<span>子组件</span>
<slot/>
</div>
```<p style="line-height: 20px; color: #ccc">
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者: 山水有轻音
原文链接:<a href='https://juejin.im/post/6868060397094731789'>https://juejin.im/post/6868060397094731789</a>
</p>