vue常见问题,样式穿透，e-charts图表使用等

外层类 >>> 想要修改的类名 {
　　要修改的样式
}
例：.wrapper >>> .el-card__header {
  border-bottom: none
}

外层类  /deep/  想要修改的类名 {
　　要修改的样式
}
例：.wrapper /deep/ .el-card__header {
border-bottom: none
}

::v-deep 想要修改的类名 {
　　要修改的样式
}
例：::v-deep .el-card__header {
border-bottom: none
}

series: [{//系列列表,通过type决定自己的图表类型
      name: ‘中国‘,
      zoom:1.2,          --缩放比例
}]
window.onresize = myChart.resize;  --移动端适配

方法一：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
        },

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%'
            },
            xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
              splitLine:{show: false},//去除网格线
              splitArea : {show : true}//保留网格区域
           },
           yAxis: {
             splitLine:{show: false},//去除网格线
             splitArea : {show : true}//保留网格区域
            },
        }

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
        },

<div @click="clickFlag && addGoodsHandler()">
    添加产品
</div>

<Child><!--【1】首先把child写成双标签样式，把要插入的内容放双标签中间-->
      <p>插入子组件的内容</p>
 </Child>

<div class="child">
    <span>子组件</span>
    <slot/>
  </div>