vue应用小结（插槽、变量引入本地图片、变量key值取值、科技数字、echarts图例样式修改、图表跟随屏幕变化适配）

本文章为个人应用中的小结，总结混乱请见谅，若能帮到你也是很开心的。

插槽小结

包含指定插槽，默认插槽定义及应用

<div class="box">
          <div class="cbl_box1Title">
            <div class="boxLeft">
               <!-- 对应下面图片引入 urlBtn()-->
              <img class="imgb" :src=urlBtn(icon) >
              <div class="title">{{title}}</div>
            </div>
            <div class="selectBox" >     
            <!-- 指定插槽，在组件应用时需对应名称  <template slot="selectB"></template> -->
              <slot name="selectB"></slot>
            </div>
          </div>
          <div class="slotContent">
            <!-- 默认插槽，在组件应用时可直接在组件内部应用 <div></div> -->
            <slot></slot>
          </div>
    </div>

变量引入本地图片小结

引入变量本地静态图片拼接方式不能全部是变量需要有常量和变量拼接才能识别到

 // 引入变量本地静态图片拼接方式 不能全部是变量需要有常量和变量拼接才能识别到，直接引用会报警告
      urlBtn(e){
        // require() 引入 静态地址 + 父页面传回来的变量值 
        return require('../assets/icons/largeScreen/'+e)
      }

变量key值取值

item.sum=res.records[`${item.sumKey}`]

sumKey为对应的key名

      {
          title:'名',
          sum:'',
          sumKey:'completeProjectNum',
          Proportion:'',
          ProportionKey:'completeProjectRate',
          color:'#ff6249'
        },

//取值 [`${item.sumKey}`]重点
        item.sum=res.records[`${item.sumKey}`]

科技数字（仅为数字拆分，字体科技感可自行操作引入）

效果

代码

//设置展示位数数组
          var Arr = [ {num:''},{num:''},{num:''},{num:''},{num:''},{num:''},{num:''},{num:''},{num:''}]
          var str ="13556"
          var sumArr = str.split('')//拆分字符串为数组         
          //根据拆分后数组长度计算开始位置，5为本次展示格式的中间位置，可根据自己的展示内容自行设置
          var ArrKey = Number(5-Math.ceil(sumArr.length/2))
          Arr.map((item,index)=>{
          //循环，据开始位置和下标位置进行赋值。
            if(index>=ArrKey){
              if(sumArr[index-ArrKey]){
                item.num=sumArr[index-ArrKey]
              }
            }
          })

echart画图及图例样式修改

效果图

代码

//仅为渲染代码，数据部分未展示 myChart在data中注册  myChart:null
    this.myChart = this.$echarts.init(this.$refs.pieChartLargeAll);
      var option = {
        title: {//环形中间标题部分
          x: "29%", //X坐标
          y: "35%", //Y坐标
          textAlign: 'center',
          // padding: [1, 1, 1, 15], //标题内边距
          text: this.sum , //主标题
          subtext: "项目总数" , //副标题
          textStyle: { //标题样式
            fontSize: 24,
            color: "#FFFFFF",
            fontWeight:'bold'
          },
          subtextStyle: { //副标题样式
            fontSize: 14,
            color: "#EDEDED",
            formatter: '',
          }
        },
        legend: {
          orient: 'vertical',
          right: '20%',
          top: 'middle',
          data: legendData,//图例数据
          formatter(name) {
              let target;
              DataArr.forEach((item) => {
                if (item.name === name) {
                  target = item.value;
                }
              });
              return '{a|'  +name+ '} {b| '+ target +'}';//定义文本名
            },
          textStyle:{
            lineHeight:25,
            color:'#fff',
            ellipsis:{},
            rich: {
              //根据定义的文本名，设置相应的格式
                  a: {
                      color: '#C7C7C7',
                      lineHeight: 10,
                      fontSize:12,
                      width:70
                  },
                  b: {
                      fontSize: 14,
                      fontWeight:'bold',
                      fontFamily: 'Microsoft YaHei',
                      borderColor: '#C7C7C7',
                      borderRadius: 4
                  }
              }
          }
        },
        //掠过时提示
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b} : {c} ({d}%)'
        // },
        icon: 'circle',
        color: colorArr,
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['30%', '50%'],
            itemStyle: {
              label: {
                normal: {
                  formatter: function(params) {
                    // return params.percent - 0 + '%'
                  },
                  textStyle: {
                    color: '#000'
                  }
                }
              },              
              borderColor:'#010102',
              borderWidth:2,
              borderType:'solid'
            },
            data: DataArr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                position: 'center',
                show: false
              },
            }
          }
        ]
      }
      //渲染
      this.myChart.setOption(option)

图表跟随屏幕变化适配屏幕

此方法适用于多个子组件图表共存一个父页面屏幕变化后重新渲染适配。

 mounted() {
      this.$nextTick(() => {
          this.pieChartLarge()
      })
       //监听屏幕变化，调用重新渲染方法
      window.addEventListener('resize', this.resizeChart);
    },
 beforeDestroy() {//销毁图表销毁监听事件
    window.removeEventListener('resize', this.resizeChart);
  },
methods: {
  resizeChart(){//渲染图表
    this.myChart.resize()
  },
}