事件触发与监听 $emit 和 $on $emit触发这个事件 this.$emit('getParam','name')//this.$emit（'自定义事件名','要传送的数据'） 我们可以用$on方法监听一个事件，并且指定事件的处理方法， this.$on('getParam',this.handleParam)//this.$on('自定义事件名',处理方法) 也可以 <my-component v-on:自定义事件名="处理方法"></my-component>

echars 常用配置项 x 或者 y轴标签太多超出图标不显示 option里面添加如下内容（letf，right）都可以调整位置 grid: { left: 160;}, 格式化底部标签 字符 xAxis: {                             type: 'category',                             data: ProductSaleName,                             axisTick: {                                 alignWithLabel: true,                                 show: false                             },                             axisLabel: {                                 interval: 0,                                 //格式化器                                 formatter: (params) => {                                     var end = ""                                     if (params.length > 6) {                                         var chars = [...params]                                         chars.forEach((element, index) => {                                             console.log(index);                                             if (!(index % 10)) {                                                 if (index != 0) {                                                     end += element + '\n';                                                 }                                             } else {                                                 end += element;                                             }                                         });                                     } else {                                         return params                                     }                                     return end                                 }                             },                         }, 开启柱状图顶部显示数据 series: [{                             color: '#a90000',                             name: '销量',                             type: 'bar',                             data: ProductSaleQuantity,                             itemStyle: {                                 normal: { //开启柱状图顶部显示数据                                     label: {                                         show: true, //开启显示                                         position: 'top', //在上方显示                                         textStyle: { //数值样式                                             color: 'black',                                             fontSize: 16                                         }                                     }                                 }                             },                         }]

作用域插槽 作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。 使用方法: 1.子组件存放一个带数据的插槽，代码如下： <template> <div class="child"> <h3>这里是子组件</h3> <slot :data="data"></slot> </div> </template> export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } } } 2.父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容 <template> <div class="father"> <h3>这里是父组件</h3> <!--第一次使用：用flex展示数据: class="tmpl"--> <child> <template slot-scope="user"> <div class="tmpl"> <span v-for="item in user.data">{{item}}</span> </div> </template> </child> <!--第二次使用：用列表展示数据--> <child> <template slot-scope="user"> <ul> <li v-for="item in user.data">{{item}}</li> </ul> </template> </child> <!--第三次使用：直接显示数据--> <child> <template slot-scope="user"> {{user.data}} </template> </child> <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽--> <child> 我就是模板 </child> </div> </template> 3.展现的效果：

具名插槽 具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。 如下代码： 子组件的代码，设置了两个插槽(header和footer) 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中 3.展示的效果： 注意： 父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。即具名插槽用name属性来表示插槽的名字，不传为默认插槽 如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就不会填充到子组件的任何一个插槽中。 如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会且全都填充到子组件的每个默认插槽中。