精华内容
下载资源
问答
  • js代码-PINK老师-创建类和对象
  • flex+流式布局+rem+less+响应式
  • 1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 ... 1.1 display 显示(重点) display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有...
  • 最新黑马程序员前端最好的pink老师最新视频来至传智播客内部人员特殊渠道,手慢无
  • 品优购项目——黑马程序员pink老师/完整源代码/内容补充完善
  • 题目描述: - 里面现存有 100 块钱。 - 如果存钱,就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 - 如果取钱,就减去取的钱数,之后弹出显示余额提示框 - 如果显示余额,就输出余额 ...
  • pink老师推荐的vue教程https://www.bilibili.com/video/BV1HE411e7vY?p=23的第二个示例,小黑记事本,因为没有资源所以都是手写的,欢迎大家来看
  • pink老师js869集笔记

    2021-05-09 11:03:14
    pink老师js869集笔记
  • pink老师学习之Echarts

    2021-02-23 20:54:40
    pink老师学习之Echarts 可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。 01-使用...

    pink老师学习之Echarts

    可视化面板介绍

    ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。

    01-使用技术

    完成该项目需要具备以下知识:

    • div + css 布局
    • flex 布局
    • Less
    • 原生js + jquery 使用
    • rem适配
    • echarts基础

    02- 案例适配方案

    • 设计稿是1920px

      1. flexible.js 把屏幕分为 24 等份

      2. cssrem 插件的基准值是 80px

        插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

        但是别忘记重启vscode软件保证生效

    03-基础设置

    • body 设置背景图 ,缩放为 100% , 行高1.15
    • css初始化

    04-header 布局

    • 高度为100px
    • 背景图,在容器内显示
    • 缩放比例为 100%
    • h1 标题部分 白色 38像素 居中显示 行高为 80像素
    • 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素
    // 格式: 当前时间:2020年3月17-0时54分14秒
    <script>
                var t = null;
                t = setTimeout(time, 1000);//開始运行
                function time() {
                    clearTimeout(t);//清除定时器
                    dt = new Date();
                    var y = dt.getFullYear();
                    var mt = dt.getMonth() + 1;
                    var day = dt.getDate();
                    var h = dt.getHours();//获取时
                    var m = dt.getMinutes();//获取分
                    var s = dt.getSeconds();//获取秒
                    document.querySelector(".showTime").innerHTML = '当前时间:' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                    t = setTimeout(time, 1000); //设定定时器,循环运行     
                }
     </script>
    
    • header部分css样式
    header {
      position: relative;
      height: 1.25rem;
      background: url(../images/head_bg.png) no-repeat top center;
      background-size: 100% 100%;
      h1 {
        font-size: 0.475rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
      .showTime {
        position: absolute;
        top: 0;
        right: 0.375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    

    05-mainbox 主体模块

    • 需要一个上左右的10px 的内边距

    • column 列容器,分三列,占比 3:5:3

    css样式:

    .mainbox {
      padding: 0.125rem 0.125rem 0;
      display: flex;
      .column {
        flex: 3;
      }
      &:nth-child(2) {
        flex: 5;
      }
    }
    

    06-公共面板模块 panel

    • 高度为 310px
    • 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
    • 有line.jpg 背景图片
    • padding为 上为 0 左右 15px 下为 40px
    • 下外边距是 15px
    • 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
    • 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
    .panel {
      position: relative;
      height: 3.875rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: url(../images/line\(1\).png);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }
    

    07-柱形图 bar 模块(布局)

    • 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px

    • 图标内容模块 chart 高度 240px

    • 以上可以作为panel公共样式部分

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }
      .chart {
        height: 3rem;
        background-color: pink;
      }
    

    08-中间布局

    • 上面是no 数字模块
    • 下面是map 地图模块
    1. 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
    2. 注意中间列 column 有个 左右 10px 下 15px 的外边距
    3. no 模块里面上下划分 上面是数字(no-hd) 下面 是 相关文字说明(no-bd)
    4. no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
    5. no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
    6. no-hd 利用 after 和 before制作2个小角, 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
    7. 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
    8. no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
    /* 声明字体*/
    @font-face {
      font-family: electronicFont;
      src: url(../font/DS-DIGIT.TTF);
    }
    

    地图模块制作:

    1. 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
    2. 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
    3. 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
    4. 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
     <div class="no">
                    <div class="no-hd">
                        <ul>
                            <li>125811</li>
                            <li>104563</li>
                        </ul>
                    </div>
                    <div class="no-bd">
                        <ul>
                            <li>前端需求人数</li>
                            <li>市场供应人数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="chart"></div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                </div>
    

    中间样式

    /* 声明字体*/
    @font-face {
      font-family: electronicFont;
      src: url(../font/DS-DIGIT.TTF);
    }
    .no {
      background: rgba(101, 132, 226, 0.1);
      padding: 0.1875rem;
      .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
          content: "";
          position: absolute;
          width: 30px;
          height: 10px;
          border-top: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
          top: 0;
          left: 0;
        }
        &::after {
          content: "";
          position: absolute;
          width: 30px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
          right: 0;
          bottom: 0;
        }
        ul {
          display: flex;
          li {
            position: relative;
            flex: 1;
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.875rem;
            color: #ffeb7b;
            padding: 0.05rem 0;
            font-family: electronicFont;
            font-weight: bold;
            &:first-child::after {
              content: "";
              position: absolute;
              height: 50%;
              width: 1px;
              background: rgba(255, 255, 255, 0.2);
              right: 0;
              top: 25%;
            }
          }
        }
      }
      .no-bd ul {
        display: flex;
        li {
          flex: 1;
          height: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          font-size: 0.225rem;
          color: rgba(255, 255, 255, 0.7);
          padding-top: 0.125rem;
        }
      }
    }
    .map {
      position: relative;
      height: 10.125rem;
      .chart {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height: 10.125rem;
        width: 100%;
      }
      .map1,
      .map2,
      .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6.475rem;
        height: 6.475rem;
        background: url(../images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
      }
      .map2 {
        width: 8.0375rem;
        height: 8.0375rem;
        background-image: url(../images/lbx.png);
        opacity: 0.6;
        animation: rotate 15s linear infinite;
        z-index: 2;
      }
      .map3 {
        width: 7.075rem;
        height: 7.075rem;
        background-image: url(../images/jt.png);
        animation: rotate1 10s linear infinite;
      }
    
      @keyframes rotate {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
      @keyframes rotate1 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }
    }
    
    

    09-Echarts-介绍

    常见的数据可视化库:

    • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
    • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
    • Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
    • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
    • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    大白话:

    官网地址:https://www.echartsjs.com/zh/index.html

    10-Echarts-体验

    官方教程:[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

    • 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0

    使用步骤:

    1. 引入echarts 插件文件到html页面中
    2. 准备一个具备大小的DOM容器
    <div id="main" style="width: 600px;height:400px;"></div>
    
    1. 初始化echarts实例对象
    var myChart = echarts.init(document.getElementById('main'));
    
    1. 指定配置项和数据(option)
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    
    1. 将配置项设置给echarts实例对象
    myChart.setOption(option);
    

    11-Echarts-基础配置

    这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

    需要了解的主要配置:series xAxis yAxis grid tooltip title legend color

    • series

      • 系列列表。每个系列通过 type 决定自己的图表类型
      • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    • xAxis:直角坐标系 grid 中的 x 轴

      • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    • yAxis:直角坐标系 grid 中的 y 轴

    • grid:直角坐标系内绘图网格。

    • title:标题组件

    • tooltip:提示框组件

    • legend:图例组件

    • color:调色盘颜色列表

      数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

    option = {
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: {
            text: '折线图堆叠123'
        },
        // 图表的提示框组件 
        tooltip: {
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: {
           // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        // 工具箱组件  可以另存为图片等功能
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // 设置x轴的相关配置
        xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
         // 设置y轴的相关配置
        yAxis: {
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: '邮件营销',
                type: 'line',
               
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
    
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
              
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
              
                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };
    
    

    12- 柱状图图表(两大步骤)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 引入到html页面中
    // 柱状图1模块
    (function() {
      // 实例化对象
      let myChart = echarts.init(document.querySelector(".bar .chart"));
      // 指定配置和数据
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发有效
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
    
      // 把配置给实例对象
      myChart.setOption(option);
    })();
    
    1. 根据需求定制

      • 修改图表柱形颜色 #2f89cf

      • 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

      color: ["#2f89cf"],
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      
      • X轴相关设置 xAxis
        • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
        • X轴线的样式 不显示
      // 设置x轴标签文字样式
      

    // x轴的文字颜色和大小
    axisLabel: {
    color: “rgba(255,255,255,.6)”,
    fontSize: “12”
    },
    // x轴样式不显示
    axisLine: {
    show: false
    // 如果想要设置单独的线条样式
    // lineStyle: {
    // color: “rgba(255,255,255,.1)”,
    // width: 1,
    // type: “solid”
    }
    }

    
    - Y 轴相关定制
      - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px
      - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
      - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   
    
    ~~~JavaScript
    // y 轴文字标签样式
    axisLabel: {
          color: "rgba(255,255,255,.6)",
           fontSize: "12"
    },
     // y轴线条样式
     axisLine: {
          lineStyle: {
             color: "rgba(255,255,255,.1)",
             // width: 1,
             // type: "solid"
          }
    5232},
     // y 轴分隔线样式
    splitLine: {
        lineStyle: {
           color: "rgba(255,255,255,.1)"
         }
    }
    
    • 修改柱形为圆角以及柱子宽度 series 里面设置
    series: [
          {
            name: "直接访问",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };
    
    • 更换对应数据
    // x轴中更换data数据
     data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
    // series 更换数据
     data: [200, 300, 300, 900, 1500, 1200, 600]
    
    • 让图表跟随屏幕自适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    13-柱状图2定制

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 修改图形大小 grid

      // 图标位置
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
        },
    

    需求2: 不显示x轴

       xAxis: {
          show: false
        },
    

    需求3: y轴相关定制

    • 不显示y轴线和相关刻度
    //不显示y轴线条
    axisLine: {
        show: false
            },
    // 不显示刻度
    axisTick: {
       show: false
    },
    
    • y轴文字的颜色设置为白色
       axisLabel: {
              color: "#fff"
       },
    

    需求4: 修改第一组柱子相关样式(条状)

    name: "条",
    // 柱子之间的距离
    barCategoryGap: 50,
    //柱子的宽度
    barWidth: 10,
    // 柱子设为圆角
    itemStyle: {
        normal: {
          barBorderRadius: 20,       
        }
    },
    
    • 设置第一组柱子内百分比显示数据
    // 图形上的文本标签
    label: {
        normal: {
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式
             formatter: "{c}%"
         }
    },
    
    • 设置第一组柱子不同颜色
    // 声明颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
      itemStyle: {
              normal: {
                barBorderRadius: 20,  
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
             
    },
    

    需求5: 修改第二组柱子的相关配置(框状)

      	    name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
    

    需求6: 给y轴添加第二组数据

    yAxis: [
          {
          type: "category",
          data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
          // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          }
        },
          {
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            }
          }
        ],
    

    需求7: 设置两组柱子层叠以及更换数据

    // 给series  第一个对象里面的 添加 
    yAxisIndex: 0,
    // 给series  第二个对象里面的 添加 
    yAxisIndex: 1,
    // series 第一个对象里面的data
    data: [70, 34, 60, 78, 69],
    // series 第二个对象里面的data
    data: [100, 100, 100, 100, 100],
    // y轴更换第一个对象更换data数据
    data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
    // y轴更换第二个对象更换data数据
    data:[702, 350, 610, 793, 664],
    

    完整代码:

    // 柱状图2
    (function() {
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".bar2 .chart"));
      // 2. 指定配置和数据
      var option = {
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          {
            data: [702, 350, 610, 793, 664],
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) {
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
    })();
    
    

    14-折线图1 人员变化模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。

        // 设置网格样式
        grid: { 
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,// 显示边框
          borderColor: '#012f4a',// 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    

    需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%

     // 图例组件
        legend: {
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },
    

    需求3: x轴相关配置

    • 刻度去除
    • x轴刻度标签字体颜色:#4c9bfd
    • 剔除x坐标轴线颜色(将来使用Y轴分割线)
    • 轴两端是不需要内间距 boundaryGap
        xAxis: {
          type: 'category',
          data: ["周一", "周二"],
    	  axisTick: {
             show: false // 去除刻度线
           },
           axisLabel: {
             color: '#4c9bfd' // 文本颜色
           },
           axisLine: {
             show: false // 去除轴线
           },
           boundaryGap: false  // 去除轴内间距
        },
    

    需求4: y轴的定制

    • 刻度去除
    • 字体颜色:#4c9bfd
    • 分割线颜色:#012f4a
        yAxis: {
          type: 'value',
          axisTick: {
            show: false  // 去除刻度
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a' // 分割线颜色
            }
          }
        },
    

    需求5: 两条线形图定制

    • 颜色分别:#00f2f1 #ed3f35
    • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
        color: ['#00f2f1', '#ed3f35'],
    	series: [{
          name:'新增粉丝',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true,
          },{
          name:'新增游客',
          data: [100, 331, 200, 123, 233, 543, 400],
          type: 'line',
          smooth: true,
        }]
    

    需求6: 配置数据

    // x轴的文字
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    
    // 图标数据
        series: [{
          name:'新增粉丝',
          data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          type: 'line',
          smooth: true
        },{
          name:'新增游客',
          data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
          type: 'line',
          smooth: true
          }
        }]
    

    需求7: 新增需求 点击 2020年 2021年 数据发生变化

    以下是后台送过来数据(ajax请求过来的)

     var yearData = [
          {
            year: '2020',  // 年份
            data: [  // 两个数组是因为有两条线
                 [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                 [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
              ]
          },
          {
            year: '2021',  // 年份
            data: [  // 两个数组是因为有两条线
                 [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
         		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
              ]
          }
         ];
    
    • tab栏切换事件
    • 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
    • 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
    • 2021 按钮同样道理

    完整代码:

    // 折线图1模块制作
    (function() {
      var yearData = [
        {
          year: "2020", // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
        },
        {
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".line .chart"));
      // 2.指定配置
      var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // 如果series 对象有name 值,则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    
      // 5.点击切换效果
      $(".line h2").on("click", "a", function() {
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
      });
    })();
    

    15-折线图2 播放量模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

     legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
    },
    

    需求2: 修改图表大小

    grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },
    

    需求3: 修改x轴相关配置

    • 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
    • x轴线的颜色为 rgba(255,255,255,.2)
         // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
         axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
             // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            },
    

    需求4: 修改y轴的相关配置

            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
    	   // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          
    

    需求5: 修改两个线模块配置(注意在series 里面定制)

           //第一条 线是圆滑
           smooth: true,
            // 单独修改线的样式
            lineStyle: {
                color: "#0184d5",
                width: 2 
            },
             // 填充区域
            areaStyle: {
                  // 渐变色,只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,
    
           name: "转发量",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
             },
             areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
             itemStyle: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,
    

    需求6: 更换数据

    // x轴更换数据
    data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
    // series  第一个对象data数据
     data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
    // series  第二个对象data数据
     data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
    
    

    16-饼形图 1年龄分布模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    定制图表需求1:

    • 修改图例组件在底部并且居中显示。
    • 每个小图标的宽度和高度修改为 10px
    • 文字大小为12 颜色 rgba(255,255,255,.5)
     legend: {
          // 距离底部为0%
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
     },
    

    定制需求2:

    • 修改水平居中 垂直居中
    • 修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
    series: [
          {
            name: "年龄分布",
            type: "pie",
            // 设置饼形图在容器中的位置
            center: ["50%", "50%"],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ["40%", "60%"],
            // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
          }
        ]
    

    定制需求3:更换数据

    // legend 中的data  可省略
    data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    //  series 中的数据
     data: [
              { value: 1, name: "0岁以下" },
              { value: 4, name: "20-29岁" },
              { value: 2, name: "30-39岁" },
              { value: 2, name: "40-49岁" },
              { value: 1, name: "50岁以上" }
     ] ,
    

    定制需求4: 更换颜色

    color: [
              "#065aab",
              "#066eab",
              "#0682ab",
              "#0696ab",
              "#06a0ab",
            ],
    
     // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    17-饼形图2 地区分布模块制作(南丁格尔玫瑰图)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    第二步:按照需求定制

    • 需求1:颜色设置
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    
    • 需求2:修改饼形图大小 ( series对象)
    radius: ['10%', '70%'],
    
    • 需求3: 把饼形图的显示模式改为 半径模式
     roseType: "radius",
    
    • 需求4:数据使用更换(series对象 里面 data对象)
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
    
    • 需求5:字体略小些 10 px ( series对象里面设置 )

      饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

    series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式, 注意它是一个对象
            label: {
              fontSize: 10
            },
          }
        ]
      };
    
    • 需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
      • 连接图表 6 px
      • 连接文字 8 px
    +        // 文字调整
    +        label:{
    +          fontSize: 10
    +        },
    +        // 引导线调整
    +        labelLine: {
    +          // 连接扇形图线长
    +          length: 6,
    +          // 连接文字线长
    +          length2: 8
    +        } 
    +      }
    +    ],
    
    
    • 需求6:浏览器缩放的时候,图表跟着自动适配。
    // 监听浏览器缩放,图表对象调用缩放resize函数
    window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    18-Echarts-社区介绍

    社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yQ8LYedJ-1614084852424)(docs/media/1576664444951.png)]

    • 在这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。

    19-Echarts-map使用(扩展)

    参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

    实现步骤:

    • 第一需要下载china.js提供中国地图的js文件
    • 第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
    • 使用社区提供的配置即可。

    需要修改:

    • 去掉标题组件
    • 去掉背景颜色
    • 修改地图省份背景 #142957 areaColor 里面做修改
    • 地图放大通过 zoom 设置为1.2即可
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: '#0b1c2d'
            }
          }
        },
    

    总结:这例子是扩展案例,大家以后可以多看看社区里面的案例。

    20- 最后约束缩放

    /* 约束屏幕尺寸 */
    @media screen and (max-width: 1024px) {
      html {
        font-size: 42px !important;
      }
    }
    @media screen and (min-width: 1920px) {
      html {
        font-size: 80px !important;
      }
    }
    
    展开全文
  • JS初级笔记PINK老师(已完结)

    千次阅读 2021-05-19 09:48:06
    fun('pink老师'); //(1) fun是变量名不是函数名 //(2) 函数表达式和声明变量差不多,只不过变量里面存放的是函数 //(3) 函数表达式也可以传递参数的 JS作用域 js的作用域(es6)之前:全局作用域,局部作用域 全局...

    计算机基础

    计算机

    • 硬件
      • 输入/输出设备,CPU,硬盘,内存
    • 软件
      • 系统软件
        • Windows, Linux, macOS
      • 应用软件
        • 浏览器,QQ,VSCode

    程序运行
    硬盘(很慢)->内存条->CPU(很快)

    初识JS

    js是一门脚本语言

    (1) 不需要编译,运行过程由js引擎逐行来进行解释并执行
    (2)nodejs做服务端
    

    浏览器执行JS

    • 浏览器分成两部分 
        1.渲染引擎
       	用来解析HTML和CSS,俗称内核
        2.JS引擎
          JS解释器,用来读取网页中的JS代码,对其处理后运行,比如chrome浏览器的V8
          
          浏览器通过内置JS执行JS代码,逐行解释每一句源码,然后计算机去执行。
      

    JS组成

    (1)ECMAScript
    (2)DOM(Document Object Model)
     		 通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)
    (3)BOM(Browser Object Model)
    		 通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等
    

    JS书写位置

    (1)行内
    (2)内嵌
    (3)外部
    
    <head>
    <!--2.内嵌-->
    <script>
    	alert('熊阳阳')
    </script>
    <!--3.外部-->
    <script src="my.js"></script>
    </head>
    
    <body>
    <!--1.行内-->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')"/>
    </body>
    

    JS注释

     1. 单行注释 // ctrl+/
     2. 多行注释 /**/  shift+alt+a
    

    JS输入输出语句

    1.alert(msg)  浏览器弹出警示框
    2.console.log(msg) 浏览器控制台打印输出信息---给程序员测试用的
    3.prompt(info) 浏览器弹出输入框,用户可以输入
    

    变量

    数据类型

    简单数据类型

    • Number, Null, Boolean, String, Undefined,Symbol

      1. Number
          1.1整数
             1.1.1八进制 var num = 010;
             1.1.2十六进制 var num = 0xa;
             1.1.3数值的最大值 Number.MAX_VALUE;
             		数值的最小值 Number.MIN_VALUE;
             1.1.4数字型的三个特殊值
             		Infinity,代表无穷大,大于任何值
             	   -Infinity
             	    NaN			
             1.1.5 isNaN()判断是否是数字,返回false,true	    
          1.2浮点数
      2. String
          2.1 可单引号可双引号 --JS推荐单引号 
          2.2 字符串转义字符,以\开始,写在引号里面 'I am \n Xiong'
          2.3 检测获取字符串的长度,age.length
          2.4 字符串拼接  字符串+任何类型=拼接之后的字符串
              2.4.1 (任何类型)会被转换为字符串,再进行拼接
      

    复杂数据类型

    数据类型转换

    转字符串

    1. num.toString()
    2. String(num)
    3. num+'我是字符串'    --和字符串拼接的结果都是字符串 
    

    转数字型

    1. parseInt('78')
    2. parseFloat('78.21')
    3. Number('12.3')=>12.3
    4. js隐式转换(-,*,/) ‘12’-0
    

    转布尔型

    1. Boolean()函数
    代表空、否定的值会被转换为false,如‘’,0,NaN, null, undefined, 其余会被转换为true
    

    流程控制

    1.顺序结构
    2.分支结构(if, switch)
      2.1 if
      2.2 if-else
      2.3 if-else if-else
    3.循环结构
      3.1 for 
    

    分支流程控制switch语句

    //值和value匹配的时候是全等匹配,===,值和数据类型完全匹配
    switch(表达式){
    	case value1:
    		 执行语句1;
    		 break;
    	case value2:
    		 执行语句2;
    		 break;
    	default:
    		 执行最后的语句;	  
    }
    

    do-while

    //do-while一定会循环一次
    do{
      // 循环体
    }while(条件表达式) 
    

    continue和break

    • continue,退出本次循环,继续执行剩余次数的循环
    • break, 立即跳出整个循环(循环结束)

    数组

    创建数组的方式

    1. 利用new创建数组
    	var arr = new Array();
    2. 利用数组字面量创建数组
    	var arr = [];
    

    访问数组元素,arr[0]; //索引值从0开始
    若没有该数组元素,输出结果为undefined

    var arr1 = new Array(2);//创建一个长度为2的空数组
    var arr2 = new Array(2,3);//等价于[2,3]
    

    冒泡排序

            // 冒泡排序
            var temp = 0;
            var arr1 = [1, 3, 2, 5, 6, 2];
            for (var i = 0; i <= arr1.length - 1; i++) {
                for (var j = 0; j <= arr1.length - 1 - i; j++) {
                    if (arr1[j] < arr1[j + 1]) {
                        temp = arr1[j + 1]
                        arr1[j + 1] = arr1[j];
                        arr1[j] = temp;
                    }
                }
            }
            console.log(arr1);
    

    检测是否为数组的两种方式

    1. instanceof
    2. Array.isArray(参数)——H5新增的 ie9以上版本支持

    数组的API

    在这里插入图片描述

    1. reverse()
    2. sort()——如果是单位数,可以正常排序;如果是双位数,会先按第一位排
    console.log([11, 2, 4, 13].sort());//[11,13,2.4]
    var arr = [11, 2, 4, 13];
    arr.sort(function(a,b){
    	return a-b;
    });
    console.log(arr);
    
    1. indexOf()和lastIndexOf()
      在这里插入图片描述

    2. 数组转字符串
      在这里插入图片描述
      4.1 arr.toString()
      4.2 arr.join(’|’)

    函数

    函数形参和实参匹配问题

    1. 如果实参的个数多于形参的个数,会取到形参的个数(也就是说,多的实参派不上用场)
    2. 如果实参的个数小于形参的个数,(形参相当于不用声明的变量,此时又没有给它赋值,就变成undefined了,参与运算)
    

    在这里插入图片描述

    函数返回值的问题

    1. 函数内部不应该有输出语句的,所以需要把结果return出去
    2. return语句之后的代码不被执行
    3. return只能返回一个值,如果用逗号隔开多个值,以最后一个为准
    4. 所以有多个返回值的时候,可以放在一个数组里,return数组就可以啦
    5. 函数如果有return,返回的是return后面的值;如果没有return,返回undefined
    6. return max;  (带个分号)
    

    break, continue, return的区别

    • break:结束当前的循环体(for, while)
    • continue: 跳出本次循环,继续执行下次循环(for, while)
    • return: 不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码

    arguments的使用

    • 所有函数都内置了一个arguments对象(只有函数才有arguments),arguments对象中存储了传递的所有实参;当不知道传入的实参的个数(实参个数会变,或者不清楚具体几个),就可以不设置形参,在函数体内部直接用arguments去获得传入的实参

    arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有一下特点:

    • 具有length属性
    • 按索引方式存储数据
    • 不具有数组的push,pop等方法(没有真正的数组的方法)
            function f1() {
                console.log(arguments)
            }
            f1(1, 2, 3, 4);
    

    在这里插入图片描述

    函数的两种声明方式

    //1. 利用函数关键字自定义函数(命名函数)
    function fn(){
    
    }
    fn();
    //2. 函数表达式(匿名函数)
    // var 变量名 = function(){};
    var fun = function(){};
    fun();
    var fun = function(aru){};
    fun('pink老师');
    //(1) fun是变量名不是函数名
    //(2) 函数表达式和声明变量差不多,只不过变量里面存放的是函数
    //(3) 函数表达式也可以传递参数的
    
    

    JS作用域

    js的作用域(es6)之前:全局作用域,局部作用域

    • 全局作用域:整个script标签,或者是一个单独的js文件
    • 局部作用域:在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用

    es6之前没有块级作用域,es6新增的块级作用域

    • 块级作用域:{} if{} for{}
      在这里插入图片描述

    全局变量与局部变量

    1. 全局变量
      在全局作用域下的变量,在全局下都可以使用
      注意:
      在函数内部,没有声明(没用var),直接赋值的变量也属于全局变量
    2. 局部变量
      在局部作用域下的变量,后者在函数内部的变量就是局部变量
      局部变量只能在函数内部使用
      注意
      函数的形参也可以看作是局部变量
    3. 从执行效率来看全局变量和局部变量
      (1)全局变量只有在浏览器关闭时才会销毁,比较占内存资源
      (2)局部变量 当我们程序执行完毕就会销毁,比较节约内存资源

    作用域链

    作用域链
    定义:内部函数访问外部函数的变量,采取的时链式查找的方式来决定取哪个值,这种结构我们称为作用域链。(就近原则)
    在这里插入图片描述
    在这里插入图片描述

    JS预解析

    在这里插入图片描述
    在这里插入图片描述
    其中:3问,是直接函数声明的方式

    fn()
    function fn(){
    	console.log(11);
    }
    经过函数提升后,就变成了
    function fn(){
    	console.log(11);
    }
    fn()
    //所以,fn()调用放在哪里都是可以的,但是如果是函数表达式那种方式,相当于是把function赋值给变量名xxx
    //被提升也是变量声明提升,所以会报错
    

    解析器运行js分为哪两步(预解析)

    1. js引擎运行js分为两步:预解析,代码执行
    (1)预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面
    (2)代码执行:按照代码书写的顺序从上往下执行
    2. 预解析分为:变量预解析(变量提升)和函数预解析(函数提升)
    (1)变量提升:把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
    (2)函数提升:把所有的函数声明提升到当前作用域的最前面,不调用函数
    

    在这里插入图片描述
    变量,函数提升后,相当于以下情况,注意,b和c前面没有var,不同于集体声明
    在这里插入图片描述

    对象

    • 在js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象
    • 对象是由属性方法组成的

    变量、属性、函数和方法的区别

    1. 变量和属性都是用来存储数据的
      1.1 变量 单独声明并赋值,使用的时候直接写变量名,单独存在
      1.2 属性 在对象里面的不需要声明的,使用的时候必须是 对象.属性
    2. 函数和方法都是实现某种功能,做某件事
      2.1 函数是单独声明,并且调用的函数名()单独存在的
      2.2 方法,在对象里面,调用的时候,对象.方法()

    创建对象的三种方式

    利用字面量创建对象

    对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法
    
    	var obj = {
    		uname:'熊阳阳',
    		age:24,
    		sex:'女',
    		sayHi:function(){
    			console.log('hi~')	
    			}	
    		}
    		//1.调用对象的属性
    		 console.log(obj.uname);
    		//1.调用对象的属性第二种方法,
    		 console.log(obj['uname']);
    		//2.调用对象的方法 sayHi ,不要忘记()
    		 obj.sayHi();
    

    利用new Object创建对象

    var obj = new Object();//创建了一个空的对象
    obj.name = '熊阳阳';
    obj.sayHi = function(){
    }
    //分号结尾
    

    利用构造函数创建对象

    由于前面两种创建对象的方式,一次只能创建一个对象,所以想要把创建对象中相同的部分封装成函数,多次调用,创建多个对象

    function Person(uname,age,content){
    	this.uname = uname;
    	this.age = age; 
    	this.sayHi = function(content){
    		console.log(content)
    	}
    }
    var xyy = new Person('熊阳阳',24,heihei);
    console.log(xyy.name);
    xyy.sayHi();
    
    //1.构造函数名字首字母大写
    //2.构造函数不需要return就可以返回结果
    

    构造函数和对象的区别

    • 构造函数是一大类(比如明星),对象是某个具体的(佐佐木希,石原里美)
    • 利用构造函数创建对象的过程也称为对象的实例化

    new关键字执行过程

    在这里插入图片描述
    new里面执行了返回这个return,所以不需要再添加return了。

    for-in遍历对象

    var obj = {
    	name:'pink',
    	age:18
    }
    for(var k in obj){
    	console.log(k);//得到的是属性名
    	console.log(obj[k]);//得到的是属性值
    }
    //for in 一般用key 或k
    

    内置对象

    JS中的对象分3种:自定义对象、内置对象、浏览器对象
    自定义对象——就是我们前面自己创建的啦
    浏览器对象——是JS特有的
    内置对象——JS种自带的对象,提供了一些常用的最基本的属性和方法(Math,Date,Array,String等)-MDN查

    自己封装数学对象

            var myMath = {
                PI: 3.1415926535,
                Max: function () {
                    var max = arguments[0];
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] > max) {
                            max = arguments[i]
                        }
                    }
                    return max;
                }
            }
            console.log(myMath.PI);
            console.log(myMath.Max(1, 3, 5, 2, 6));
    

    Math

    在这里插入图片描述

    1. Math.abs(’-1’)—1 //隐式转换
    2. Math.abs(‘pink’)—NaN
      注意,round四舍五入,.5是往大了取,对于-1.5来说,-1大一些,所以是-1
    3. Math.round(1.5)— 2
    4. Math.round(-1.5)— -1
    5. Math.round(-1.1)— -1

    Date

    Date是一个构造函数,必须要用new,和Math是不一样的
    在这里插入图片描述
    在这里插入图片描述
    倒计时
    在这里插入图片描述
    在这里插入图片描述

    基本包装类型(String,Number,Boolean)

    var str = 'andy';
    console.log(str.length);
    //对象才有属性和方法,即复杂数据类型才有 属性和方法
    //简单数据类型为什么会有length属性呢?
    //基本包装类型:就是把简单数据类型 包装成为了 复杂数据类型
    
    //上述两行代码,相当于
    var temp = new String('andy');//把简单数据类型包装为复杂数据类型
    str = temp;//把临时变量的值 给str
    temp = null;//销毁这个临时变量
    
    //js中提供了三个特殊的引用类型,String, Number, Boolean
    

    字符串的不可变

    • 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间
    • 所以不要大量的给字符串重新赋值
      在这里插入图片描述

    String的API

    在这里插入图片描述

    //统计出现次数最多的字符
      var str = 'abcoefoxyozzopp';
            var obj = {};
            for (var i = 0; i < str.length; i++) {
                if (!obj[str[i]]) {
                    obj[str[i]] = 1
                } else {
                    obj[str[i]]++
                }
            }
            var key;
            var value = 0;
            for (var k in obj) {
                if (obj[k] > value) {
                    value = obj[k];
                    key = k;
                }
            }
            console.log(key, value)
    

    在这里插入图片描述
    强啊o( ̄▽ ̄)ブ
    在这里插入图片描述

    简单类型和复杂类型的区别

    • 如果有个变量以后打算存储为对象,暂时没想好放什么,这个时候就给null
      在这里插入图片描述
      值复制和赋址的区别
      在这里插入图片描述
      简单类型传参不会互相有影响
      在这里插入图片描述
      在这里插入图片描述

    备注

    1. HTML中推荐使用双引号,JS中推荐使用单引号。
    2. 外部引入js,<script src="my.js"></script>,中间不能写其他内容<script src="my.js">123</script>,不能这样。
    3. console.log(12+'12')console.log('12'+12)出来的都是‘1212’,只要是字符串和其他类型拼接,一定是变成字符串。
    4. 逻辑与或有逻辑中断的准则,&&的优先级大于||
    5. 能被4整除且不能整除100的为闰年,或者能被400整除的就是闰年
    6. == 与===,!=与!==,后面的是严格不等于
    7. js中换行符’\n’, 空白符’\u0020‘,或者用’\t‘,相当于给每个输出一个tab缩进
    8. 不同的对象在底层都表示为二进制,在js中二进制前三位都为0的话会被判断为object类型,null的二进制表示全是0,自然前三位也是0,所以执行typeof时返回"object"
    9. 冒泡排序,5个数字,需要交换4趟,第一趟需要交换四次,第二趟3次,第三趟2次,第四趟1次
    10. 任何一个数+undefined=NaN。
    11. return num1>num2? num1:num2 (注意return的位置)
    展开全文
  • pink老师课后作业

    2021-11-12 12:46:25
    1.字符串长度 2.取出指定位置的字符如:0、3、5、9等 3.查找指定字符是否在以上字符串中存在,如i\c\b 如果存在就会返回索引号 indexof('要查找的值',从第几位开始(不写则默认从0)) 4.替换指定的字符 如:g...

    1.字符串长度

    2.取出指定位置的字符如:0、3、5、9等

    3.查找指定字符是否在以上字符串中存在,如i\c\b 如果存在就会返回索引号 indexof('要查找的值',从第几位开始(不写则默认从0))

    4.替换指定的字符  如:g替换成22,ss替换为b replace('被替换的数','需要换为的值')

    5.截取指定开始位置到结束位置的字符串如1-5的字符串 左闭右开

    6.找出以上字符串中出现次数最多的字符和出现的次数(有可能有不同的字符但次数相同)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            //给定一个字符串如:abaasdffggghhjjkkgfddssss3444343
            //1.字符串长度
            var str = 'abaasdffggghhjjkkgfddssss3444343';
            console.log(str.length);
            //2.取出指定位置的字符如:0、3、5、9等
            console.log(str.charAt(0));
            console.log(str.charAt(3));
            console.log(str.charAt(5));
            console.log(str.charAt(9));
    
            //3.查找指定字符是否在以上字符串中存在,如i\c\b 如果存在就会返回索引号 indexof('要查找的值',从第几位开始(不写则默认从0))
            console.log(str.indexOf('i'));
            console.log(str.indexOf('c'));
            console.log(str.indexOf('b'));
    
            //4.替换指定的字符  如:g替换成22,ss替换为b replace('被替换的数','需要换为的值')
            var chars = str.indexOf('g');
            while (chars !== -1) {
                str = str.replace(str.charAt(chars), '22');
                chars = str.indexOf('g', chars + 1)
            }
            console.log(str);
            console.log(str.replace(/ss/g, 'b'));
    
            //5.截取指定开始位置到结束位置的字符串如1-5的字符串 左闭右开
            var str1 = str.slice(1, 5);
            console.log(str1);
            console.log(str);
            //6.找出以上字符串中出现次数最多的字符和出现的次数
            var str2 = 'abaaaasdffgggghhjjkkgfddssss3444343';
            var chars = '';
            var obj = {};
            for (var i = 0; i < str2.length; i++) {
                chars = str2.charAt(i);
                if (obj[chars]) {
                    obj[chars]++;
                } else {
                    obj[chars] = 1;
                }
    
            }
            console.log(obj);
            var max = 0;
            var ch = '';
            for (var k in obj) {
                if (obj[k] > max) {
                    max = obj[k];
                    ch = k;
    
                }
    
            }
            //判断如果有属性名不同但是次数相同的情况下 我们就再遍历一次obj来和前一次的最大值比较 如果有相等且属性名不等那就拼接属性名
            for (var k1 in obj) {
                if (obj[k1] == max && k1 != ch) {
                    ch += '和' + k1;
                }
            }
            console.log(ch + '出现的次数最多' + '总共出现了' + max + '次');
        </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

    展开全文
  • 我是物联网专业的学生,需要将单片机采集的数据显示在网页,当然图表方式显示更加直接,所以这里是跟着pink老师的笔记学习的一点心得。 可视化面板介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销...

    echarts


    我是物联网专业的学生,需要将单片机采集的数据显示在网页,当然图表方式显示更加直接,所以这里是跟着pink老师的笔记学习的一点心得。当然只是帮助大家入门如果需要还是去看官方文档更全更详细,建议多试一些样例,删一些属性看发生什么变化

    可视化面板介绍

    应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出

    Echarts介绍

    常见的数据可视化库:

    • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
    • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
    • Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
    • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
    • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    Echarts使用步骤

    1.下载并引入echarts.js文件 ->图表依赖这个js库

    <script src="js/echarts.min.js"></script>
    

    2.准备一个具备大小的DOM容器 ->生成的图表会放入这个容器

    <div class="box"></div>
    
    <style>
    .box{
    	width:600px;
    	height: 400px;
    		}
    </style>
    

    3.初始化echarts实例对象 ->实例化echarts对象

    //初始化实例对象  echarts.init(dom容器);
    	var myChart=echarts.init(document.querySelector(".box"));
    

    4.指定配置项和数据option ->根据具体需求修改配置选项

    // 指定图表的配置项和数据
    	var option = {
    	title: {
    		text: 'ECharts 入门示例'
    	},
    	tooltip: {},
    	legend: {
    		data:['销量']
    	},
    	xAxis: {
    		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    	},
    	yAxis: {},
    	series: [{
    		name: '销量',
    		type: 'bar',
    		data: [5, 20, 36, 10, 10, 20]
    	}]
    };
    

    5.将配置项设置echarts实例对象 ->让echarts对象根据修改好的配置生效

    //把配置项给实例对象
    myChart.setOption(option);
    

    注意,加载echarts.js的位置, echarts.js引用放在head中或者放在body中HTML代码的前面了,造成加载时阻塞后面的html。
    造成echarts Cannot read property ‘getAttribute’ of null 报错
    就是 不要把echarts.js放在head中 只要将其放在< /body>之前就可以了

    Echarts-基础配置

    color:调色盘颜色列表

    color设置我们线条的颜色 注意后面是个数组

    
        color: ['pink', 'red', 'green', 'skyblue'],
    

    title:标题组件

    设置图标标题

    title: {
            text: '折线图堆叠'
        },
    

    tooltip:提示框组件

    设置图标的提示框组件

     tooltip: {
          //触发方式 axis是坐标轴触发
            trigger: 'axis'
        },
    

    触发类型

    item
    数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
    
    axis
    坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    
    none
    什么都不触发。
    

    legend:图例组件

    legend: {
    
    // series里面有了 name值则 legend里面的data可以删掉
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
    

    在这里插入图片描述
    把那个点成灰色的那个对应的折线就消失了

    toolbox: 工具箱组件

    saveAsImage

    可以另存为图片等功能,就是旁边那个下载按钮

     toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
    

    dataZoom:

    区域缩放

    dataZoom: {
                    yAxisIndex: 'none'
                },
    

    dataView:

    数据视图,转化为文本的格式

    dataView: {readOnly: false},
     
    

    restore:

    还原

    restore: {},
    
      toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
    

    grid: 网格配置

    grid可以控制线形图 柱状图 图表大小

    grid: {
            left: '3%', 
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
    

    left,riht都是相当于当前dom容器左侧或右侧来计算的

    xAxis:直角坐标系 grid 中的 x 轴

    xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
    

    type

    坐标轴类型

    'value' 数值轴,适用于连续数据。
    
    'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
    
    'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
    
    'log' 对数轴。适用于对数数据。
    

    boundaryGap:

    是否让我们的线条和坐标轴有缝隙
    
    坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    
    一般设置为false不要留缝隙
    

    yAxis:直角坐标系 grid 中的 y 轴

    yAxis: {
            type: 'value'
        },
    

    series: 系列列表

    每个系列通过 type 决定自己的图表类型
    大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    注意series里面是个数组,每个数组元素又是一个对象

    series里面有了 name值则 legend里面的data可以删掉

    // 系列图表配置 它决定着显示那种类型的图表
     series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    

    name

    系列名称,用于tooltip的显示,series里面有了 name值则 legend里面的data可以删掉

    data

    里面存放的是数组是数据

    type

    line

    折线图是用折线将各个数据点标志连接起来的图表,用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。

    bar

    柱状图(或称条形图)是一种通过柱形的高度(横向的情况下则是宽度)来表现数据大小的一种常用图表类型

    pie

    饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

    stack

    数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加,但是我们一般不让它堆叠允许重复

    markPoint & markLine

    最大值最小值的点

     markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
    

    完整示例加注解

    option = {
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: {
            text: '折线图堆叠123'
        },
        // 图表的提示框组件 
        tooltip: {
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: {
           // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        // 工具箱组件  可以另存为图片等功能
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // 设置x轴的相关配置
        xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
         // 设置y轴的相关配置
        yAxis: {
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: '邮件营销',
                type: 'line',
               
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
    
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
              
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
              
                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };
    

    柱状图图表

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="js/jquery.js"></script>
    		<script src="js/bootstrap.min.js">
    			
    		</script>
    		
    		
    		<style>
    			.box{
    			width:600px;
    			height: 400px;
    		}
    		</style>
    		
    	</head>
    	
    	
    	
    	<body>
    		<div class="box">
    			
    		</div>
    
    		<script src="js/echarts.min.js">
    			
    		</script>
    
    <script>
    	//舒适化实例对象  echarts.init(dom容器);
    	var myChart=echarts.init(document.querySelector(".box"));
    	// 指定图表的配置项和数据
    	option = {
    	
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };
    //把配置项给实例对象
    myChart.setOption(option);
    
    </script>
    	</body>
    
    	
    </html>
    
    

    修改图表柱形颜色

    color: ["#2f89cf"],
    

    修改图表大小

    grid决定我们的柱状图的大小
    可以跟%数也可以跟px单位

    grid: {
         left: "0%",
         top: "10px",
         right: "0%",
         bottom: "4%",
         // 是否显示刻度标签 如果是true 就显示 否则反之
         containLabel: true
       },
    

    文本颜色和字体大小设置

      // 设置x轴标签文字样式
      // x轴的文字颜色和大小
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            },
    

    X轴线的样式 不显示

     //  x轴样式不显示
       axisLine: {
           show: false
           // 如果想要设置单独的线条样式 
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
          }
       }
    

    Y 轴相关定制

    axisLabel 刻度标签

       // y 轴文字标签样式
       axisLabel: {
             
             color: "rgba(255,255,255,.6)",
              fontSize: "12"
       },
       
        // y轴线条样式
        axisLine: {
             lineStyle: {
                color: "rgba(255,255,255,.1)",
                // width: 1,
                // type: "solid"
             }
       5232},
       
        // y 轴分隔线样式
       splitLine: {
           lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
       }
       
    	// 不显示刻度
    	axisTick: {
    	   show: false
    	},
    

    修改柱形为圆角以及柱子宽度 series 里面设置

       series: [
             {
               name: "直接访问",
               type: "bar",
               // 修改柱子宽度
               barWidth: "35%",
               data: [10, 52, 200, 334, 390, 330, 220],
               itemStyle: {
                 // 修改柱子圆角
                 barBorderRadius: 5
               }
             }
           ]
         };
    

    更换对应数据

       // x轴中更换data数据
        data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
        
       // series 更换数据
        data: [200, 300, 300, 900, 1500, 1200, 600]
    

    让图表跟随屏幕自适应

      window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    图形上的文本标签

    // 图形上的文本标签
    label: {
        normal: {
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式
             formatter: "{c}%"
         }
    },
    

    positon

    top / left / right / bottom / inside / insideLeft / insideRight / 
    insideTop / insideBottom / insideTopLeft / insideBottomLeft /
    insideTopRight / insideBottomRight
    
    也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置
    

    示例

     position: 'top'
    
    
     // 绝对的像素值
      position: [10, 10],
      // 相对的百分比
      position: ['50%', '50%']
    

    formatter

    标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行
    字符串模板 模板变量有:

    
    {a}:系列名。
    {b}:数据名。
    {c}:数据值。
    

    进度条样式的柱子

    核心原理就是两个柱子一个柱子的样式设为条,另一个的柱子的样式设为框,然后让框压着条

    条状

    name: "条",
    // 柱子之间的距离
    barCategoryGap: 50,
    //柱子的宽度
    barWidth: 10,
    // 柱子设为圆角
    itemStyle: {
        normal: {
          barBorderRadius: 20,       
        }
    },
    

    设置第一组条状内百分比显示数据

    // 图形上的文本标签
    label: {
        normal: {
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式 {c}会自动解析data里的数据
             formatter: "{c}%"
         }
    },
    

    设置第一组柱子不同颜色

    // 声明颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
      itemStyle: {
              normal: {
                barBorderRadius: 20,  
                color:function(params){
                 // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
               }
                
              }
             
    },
    

    框状

    把柱状图的颜色去掉,价格边框的颜色

      	    name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
    

    给y轴添加第二组数据

    在图的右边也显示数据

    yAxis: [
          {
          type: "category",
          data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
          // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          }
        },
          {
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            }
          }
        ],
    

    设置两组柱子层叠

    也就是让框状柱子压住条状柱子

    // 给series  第一个对象里面的 添加 
    yAxisIndex: 0,
    // 给series  第二个对象里面的 添加 
    yAxisIndex: 1,
    

    如果数据显示的和数组是反过来了

    可以在yAxis里面添加一个inverse默认是false

    inverse:true
    

    完整代码

    // 柱状图2
    (function() {
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".bar2 .chart"));
      // 2. 指定配置和数据
      var option = {
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          {
            data: [702, 350, 610, 793, 664],
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) {
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
    })();
    

    折线图

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    修改折线图大小,显示边框设置颜色,显示刻度标签

     // 设置网格样式
        grid: { 
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,// 显示边框
          borderColor: '#012f4a',// 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    

    修改图例组件中的文字颜色 距离右侧 right 为 10%

    默认都是auto 居中对齐

    // 图例组件
        legend: {
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },
    

    x轴相关配置

    刻度去除
    x轴刻度标签字体颜色
    剔除x坐标轴线颜色(将来使用Y轴分割线)
    轴两端是不需要内间距 boundaryGap

      xAxis: {
          type: 'category',
          data: ["周一", "周二"],
    	  axisTick: {
             show: false // 去除刻度线
           },
           axisLabel: {
             color: '#4c9bfd' // 文本颜色
           },
           axisLine: {
             show: false // 去除轴线
           },
           boundaryGap: false  // 去除轴内间距
        },
    

    y轴的定制

    刻度去除
    字体颜色
    分割线颜色

        yAxis: {
          type: 'value',
          axisTick: {
            show: false  // 去除刻度
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a' // 分割线颜色
            }
          }
        },
    

    把折线修饰为圆滑

    series 数据中添加 smooth 为 true

    series: [{
          name:'新增粉丝',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true,
          },{
          name:'新增游客',
          data: [100, 331, 200, 123, 233, 543, 400],
          type: 'line',
          smooth: true,
        }]
    

    完整代码

    // 折线图1模块制作
    (function() {
      var yearData = [
        {
          year: "2020", // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
        },
        {
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".line .chart"));
      // 2.指定配置
      var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // 如果series 对象有name 值,则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    
      // 5.点击切换效果
      $(".line h2").on("click", "a", function() {
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
      });
    })();
    

    注意:每次series里data数据改变需要重新渲染echarts
    myChart.setOption(option);

    填充颜色

     // 填充区域
            areaStyle: {
                  // 渐变色,只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
    

    设置拐点

    symbol

    'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    
       // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,
    
    
            
      //第一条 线是圆滑
           smooth: true,
            // 单独修改线的样式
            lineStyle: {
                color: "#0184d5",
                width: 2 
            },
             // 填充区域
            areaStyle: {
                  // 渐变色,只需要复制即可
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
           itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
            },
            // 开始不显示拐点, 鼠标经过显示
            showSymbol: false,    
    

    饼形图

    修改图例组件

    修改图例组件在底部并且居中显示
    修改小图标的宽度和高度
    修改文字大小为

     legend: {
          // 距离底部为0%
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
     },
    

    修改水平居中 垂直居中,和大小

    带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而饼形图是通过 radius 修改大小
    分为内圆半径和外圆半径,饼形图的大小主要是由外圆半径

    series: [
          {
            name: "年龄分布",
            type: "pie",
            // 设置饼形图在容器中的位置
            center: ["50%", "50%"],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ["40%", "60%"],
            // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
          }
        ]
    

    label

    饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等

    labelLine

    标签的视觉引导线配置。在 label 位置 设置为’outside’的时候会显示视觉引导线,简单说就是用线指向饼图的文本

    length和length2

    length 视觉引导线第一段的长度。也就是连接图形的那段线的长度
    length2 视觉引导项第二段的长度,也就是连接文字的线段的长度

    南丁格尔玫瑰图

    它有两种模式一个是半径模式,另一个是面积模式

    颜色设置

    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    

    修改饼形图大小 ( series对象)

    radius: ['10%', '70%'],
    

    series对象 里面 data对象格式

       		  { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
    

    饼形图的显示模式

    roseType: "radius",//半径模式
    
    roseType: 'area',//面积模式
    

    控制饼形图的文字的一些样式。 label 对象设置

    series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式, 注意它是一个对象
            label: {
              fontSize: 10
            },
          }
        ]
      };
    

    防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

            // 文字调整
            label:{
              fontSize: 10
            },
            // 引导线调整
            labelLine: {
               // 连接扇形图线长
             length: 6,
              // 连接文字线长
             length2: 8
            } 
          }
        ],
    
    

    Echarts-社区介绍

    Echarts-社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方

    展开全文
  • html,css基础知识点参考pink老师的ppt

    千次阅读 多人点赞 2020-06-19 21:02:59
    Pink 老师总结 去掉 li 前面的 项目符号(小圆点) border-radius box-shadow text-shadow 浮动 标准流 float 浮动元素会具有行内块元素特性 为什么需要清除浮动? 清除浮动方法 定位 定位模式 静态定位 static 相对...
  • 黑马pink老师:CSS基础 总结Ⅲ

    千次阅读 2020-08-24 13:46:36
    定位 4.3CSS属性书写建议顺序 常见的图片格式 CSS基础总结Ⅲ 学习于黑马程序员pink老师的教程 1.浮动(float) 网页布局的本质一用CSS来把盒子摆放到相应位置。 CSS提供了三种传统布局方式(简单说,就是盒子如何进行...
  • 此图来自pink老师课程截图 给父元素添加双伪元素 (额外标签法的升级版,但空盒子用伪元素选择器加在css里, 且在浮动元素的前后都加空盒子) 此图来自pink老师课程截图 定位 作用:可使盒子自由移动或固定在屏幕的...
  • Pink老师-简易ATM机

    2021-07-16 17:19:53
    刚开始学习前端知识,有什么做得不好,望各位多多指教下,谢谢! 效果图: 功能上基本实现! <!DOCTYPE html> <html lang="en"> ...meta name="viewport" content="width=devi.
  • <script> 作业1 var time = prompt('请输入时间'); if (time == 12) { alert('中午好'); } else if (time == 18) { alert('傍晚好'); } else if (time == 23) { alert('深夜好');... ...
  • <script> var name = prompt('请输入您的姓名: ') var age = prompt('请输入您的年龄: ') var sex = prompt('请输入您的性别: ') alert( '您的姓名是:'+name+ '\n您的年龄是:'+age+ ...
  • pink老师学习笔记56

    2020-06-15 22:47:17
    `` 第一部分 前端HTML基础 第一章 html基本结构 认识HTML: html不是一种编程语言,是一种标志语言 标记语言是由一套标识标签组成的 ... ...—-仅仅用于标题文本,不要为了产生粗体文本使用它们 ...引号
  • @综合案例——注册页面——pink老师 Document 青春不常在,抓紧谈恋爱 性别 男 女 生日 --请选择年-- 1997 1998 1999 2000 2001 --请选择月-- 1 2 3 4 5 6 7 8 9 10 11 12 --请选择日-- 1 2 3 4 5 6 7 8 9 10 11 12 ...
  • pink老师js基础自学笔记-数字类型转换 数字类型转换 -转换为字符型 1.把数字型转换为字符串型 变量.toString > var num = 10; > var str = num.toString(); > console.log(str); //10 > console....
  • jQery基础参考pink老师ppt

    千次阅读 2020-08-18 10:23:00
    } #content { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="jquery.min.js"></script> <script> $(function() { // 1. 鼠标经过左侧的小li $("#left li").mouseover...
  • p> 作者:pink老师 2019-8-8p> body> html> 4.4 文本格式化标签 在网页中为文本设置 粗体、斜体、或 下划线 等效果,使文本以特殊方式显示。 突出重要性 语义 标签 说明 加粗 或 倾斜 或 删除线 或 下划线 或 ...
  • 本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家 如有错误,欢迎指出。如有侵权,联系删除 文章目录1. 案例准备工作2. CSS属性书写...
  • 5.1边框(border) 5.1.1边框样式 5.1.2圆角边框 5.2内边距(padding) 5.3外边距(margin) 5.3.1实现水平居中 5.3.2外边距合并 5.3.3清除内外边距 5.4盒子阴影(shadow) CSS基础总结Ⅱ 学习于黑马程序员pink老师的教程 ...
  • Pink老师-简易计算器

    2021-07-16 17:08:22
    刚开始学习前端知识,有什么做得不好,望各位多多指教下,谢谢! 最终做出来的效果图: 这个计算器用了两种方法,基本功能都实现了。 <!DOCTYPE html> <html lang="en">...meta name="viewport.
  • // 1.求1-100之间所有数总和与平均值 var sum = 0; for ( i = 1; i <= 100; i++) { sum += i; } console.log('总和是'+sum); console.log('平均值是'+ sum/100); //2.求 1-100 所有偶数和 ...= 100...
  • 黑马pink老师的HTML基础总结

    千次阅读 2020-08-22 20:00:51
    学习于黑马程序员pink老师的教程 Web标准的构成主要包括结构( Structure)、表现 ( Presentation )和行为( Behavior )三个方面。 构成 作用 结构 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,310
精华内容 2,524
关键字:

pink老师