rabbit-tian / vue-and-other Goto Github PK

用法上区别

1. forEach

   • forEach()不会返回有意义的值的。我们在回调函数中直接修改arr的值。

     let arr = [1,2,3,4]; 
     arr.forEach(function (e,i) {
       arr[i] = e*2;
     })
     console.log(arr); // [2,4,6,8]
     

2. map

   • map()会返回一个全新的数组，原本的数组不受到影响

     let arr2 = [1, 2, 3, 4];
     let newArr = arr2.map(function (e) {
         return e*2
     })
     console.log(newArr); // [2,4,6,8]
     console.log(arr2); // [1,2,3,4]
     

适用环境

1. forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

   let arr3 = ['a', 'b', 'c', 'd'];
   arr3.forEach((letter) => {
     console.log(letter); 
   });
   

2. map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

   // 先使用map将每一个元素乘以2，然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2
   
   let arr = [1, 2, 3, 4, 5];
   let arr2 = arr.map(num => num * 2).filter(num => num > 5);
   
   // arr2 = [6, 8, 10]
   

速度

1. map 比 forEach更快

总结

1. 能用forEach()做到的，map()同样可以。反过来也是如此。
2. map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
3. forEach()允许callback更改原始数组的元素。map()返回新的数组。

1. build => webpack.prod.conf.js => 加入新增代码

new webpack.optimize.UglifyJsPlugin({
      //自动删除console.log
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      },
      // sourceMap: true
    }),

1. 在 config/ index.js 文件中配置

dev: {
assetsPublicPath: './', // 改成相对路径
}

build: {
assetsPublicPath: './',
}

使用方法

1. 图像展示的容器

   // html
   <div id="data_show" class="data_show"></div>
   
   // css 设置一个大小
     .data_show {
        width: 100%;
        height: 5.3rem;
     }
   
   

2. 初始化

   • var data_show = echarts.init(document.getElementById("data_show"));

3. 填写参数

   option_count = {
       tooltip: {
         trigger: "axis",
         show: false
       },
       calculable: true,
       grid: {
         // 整个树状图位置
         left: "5%",
         right: "5%",
         top: "10%",
         containLabel: true,
         height: 220
       },
       xAxis: {
         type: "category",
         data: x_data,
         axisLabel: {
           //调整x轴的lable
           textStyle: {
             fontSize: 10,
             color: "#71777D"
           },
           interval: 0
           // rotate: -40
         },
         // 去除x轴上的刻度线
         axisTick: {
           show: false
         },
         // 坐标轴线
         axisLine: {
           lineStyle: {
             color: "#F0F2F3"
           }
         }
       },
       yAxis: [
         {
           type: "value",
           splitLine: {
             //网格线的格式
             show: true,
             lineStyle: {
               color: "#F0F2F3", //网格线颜色
               width: 1, //网格线宽度
               type: "solid" //网格线样式
             }
           },
           axisLabel: {
             //调整x轴的lable
             textStyle: {
               fontSize: 10, // 让字体变大
               color: "#71777D"
             }
           },
           axisLine: {
             show: false
           },
           // 去除x轴上的刻度线
           axisTick: {
             show: false
           }
         }
       ],
       series: {
         name: "平均分",
         type: "bar",
         barWidth: 24,
         itemStyle: {
           normal: {
             color: "#B3DE9A"
           }
         },
         data: y_data
       }
   };
   
   

4. 将参数隐射到容器里

   • data_show.setOption(option_count);

关于那些参数

1. 图形位置

   • 树状图和折线图位置 =>grid

   grid: {
     // 整个树状图位置
     left: "5%",
     right: "5%",
     top: "10%",
     containLabel: true,
     height: 220
   },
   

   • 饼状图位置
     • center: ["48%", "50%"],

2. 树状图柱子的宽度

   • barWidth: 24

3. 控制饼图的大小

   • radius: [0,"50%"]

4. x轴

   • 刻度线显示与否: axisTick: {show: false}
   • 坐标轴线颜色: axisLine: {lineStyle: {color: "#E7E9EC"}}

5. y轴

   • 网格线的格式

     splitLine: {
       //网格线的格式
       show: true,
       lineStyle: {
         color: "#F0F2F3", //网格线颜色
         width: 1, //网格线宽度
         type: "solid" //网格线样式
       }
     },
     

1. 下载 viewer.css 和 viewer.js 和 jquery.min.js

   • git clone https://github.com/fengyuanchen/viewerjs.git.
   • http://www.jq22.com/jquery-info122

2. 引入使用

   • <link rel="stylesheet" href="css/viewer.min.css">
   • <script src="js/jquery.min.js"></script>
   • <script src="js/viewer.min.js"></script>

3. html

   • 支持一张或多张图片

   <div id="dowebok">
       <img data-original="img/bg1.jpg" src="img/bg.jpg" alt="图片1">
       <h3>你好呀</h3>
       <img data-original="img/bg2.jpg" src="img/bg.jpg" alt="图片2">
       <h3>你好呀</h3>
       <img data-original="img/bg3.jpg" src="img/bg.jpg" alt="图片3">
   </div>
   

4. js

   $('#dowebok').viewer();
   

在computed中动态添加

<Table :columns="tableColumns" :data="tableData" ref="table"></Table>

data(){
   return {
      selectShowGrade: true, // 是否显示年级
      selectShowClass: true, // 是否显示班级
      selectShowActivityName: false, // 是否显示活动名称
      selectShowActivitynum: true, // 是否显示活动数
   }
}

// 动态显示影藏列表的 列
  computed: {
    tableColumns() {
      let columns = [];
      columns.push({
        title: "排名",
        key: "ranking",
        render: (h, params) => {
          // console.log(params.index);
          return h(
            "span",
            params.index + 1 + this.pageSize * (this.curPage - 1)
          );
        }
      })
      if (this.selectShowGrade) {
        columns.push(
          {
            title: "年级",
            key: "gradeName"
          }
        )
      }
      if (this.selectShowClass) {
        columns.push(
          {
            title: "班级",
            key: "className"
          }
        )
      }
      if (this.selectShowActivityName) {
        columns.push(
          {
            title: "活动名称",
            key: "activityName"
          }
        )
      }
      if (this.selectShowActivitynum) {
        columns.push(
          {
            title: "活动数",
            key: "activityCount",
          }
        )
      }
      columns.push(
        {
          title: "参与人数",
          key: "joinCount"
        }
      )
      columns.push(
        {
          title: "上传作品数",
          key: "workCount"
        }
      )
      return columns;
    }
  },