JavaScript-框架学习笔记

jQuery

Mock

应用场景

在我们自己做一个项目时，会遇到后端还没完成数据输出或者接口没写好的情况。你没有办法想后台获取数据，这时候需要前端只好自己写静态模拟数据（假数据）。mockjs就是用来创造假数据的，他的用法和从后端取数据是基本一样的，基本的语法看下文，移步官方文档。

如果数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集整理。

mock优点

前后端分离：让前端工程师独立于后端进行开发
增加单元测试的真实性：通过随机数据，模拟各种场景
开发无侵入：不需要修改就有代码，就跨域拦截Ajax请求，返回模拟响应数据
用法简单：符合直觉的接口
数据类型丰富：支持生成随机的文本，数字，布尔值，日期，邮箱，链接，图片，颜色等
方便扩展：支持扩展更多数据类型，支持自定义函数和正则
在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相对应的字段写好，在接口完成之后，只需要改变url地址即可

mock的基本使用

javascript

//直接引入
<script src="http://mockjs.com/dist/mock.js"></script>

//在js简单造数据  
Mock.mock('http://g.cn',{
    'name':'@NAME',
    'color':'@COLOR',
    'email':'@EMAIL'
})

//和JQ一起使用
$.ajax({
    url:'http://g.cn'
}).done(function(data,status,xhr){
    console.log(data)
})

//打印出来如下
{
    "name": "Donna Williams",
    "color": "#f2797c",
    "email": "p.oilvqf@eqonsg.ke"
}

javascript

Mock.mock([rurl],[rtype],[template|function(options)])

这里的参数都是可选：

rurl(可选)。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /shoopList

rtype(可选)。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template(可选)。
表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }

function(options)(可选)。
表示用于生成响应数据的函数。

options：指向本次请求的 Ajax 选项集

javascript

//定义数据
const data = Mock.mock({
    "data|20": [{
        "goodsId|+1": 1,
        "goodsName": "@ctitle(10)",
        "goodsTel": /^1(5|3|7|8)[0-9]{9}$/,
        "goodsAddress": "@county(true)",
        "goodsLogo": "@Image('200x100', 'EasyMock')",
    }]
})

//模拟数据接口
Mock.mock(/\/shoopList/,"post",function(options){
    console.log(options);
    return data

})

/*
  输出的options的值为
    url:"请求的地址"
    type:"请求的类型"
    body:post提交的数据
*/

phantomjs

ECharts

ECharts是JavaScript的一个可视化图形的库

安装

通过 npm 获取 echarts，npm install echarts --save

开始

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!-- 引入 ECharts 文件 -->
    </head>

    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px; height: 400px;"></div>
    </body>

    <script src="../node_modules/echarts/dist/echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));

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

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</html>

步骤分析：

首先引入echarts库，引入后全局会挂载echarts这个对象
定义一个div指定id当作容器
echarts.init(容器).setOption({})初始化容器且设置参数

基础概念

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

系列

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

series.type图标类型：

line折线图
bar柱状图
pie饼图
scatter散点图
graph关系图
tree树图

一个图标中有多个类型时，有两种定义的方案：

在serise里声明多个

Javascript

echarts.init(document.querySelector("#main")).setOption({
      xAxis: { 
      	data: ["a","b","c","d","e","f","g"]
      },
      yAxis: {},
      dataset: {
          source: [
              ["h", 34, 20, "XX", 52],
              [, 12, 20, "XX", 52],
              [, 33, 20, "XX", 52],
              ["d", 44, 20],
              ["e", 55, 20],   
              ["f", 66, 20],
              ["g", 88, 20],
          ],
      },
      series: [
          {
              type: "pie",
              center: ["65%", 60],
              radius: 35,
              data: [
                  {name: "xx",value: 63},
                  {name: "yy",value: 22},
                  {name: "zz",value: 63},
              ]
          },
          {
              type: "line",
              data: [11,22,33,44,66,55,22]
          },
          {
              type: "bar",
              data: [11,22,33,44,66,55,22]
             
          },
      ],
  });

dataset方式会看起来更加的方便一些，也易于管理：

Javascript

echarts.init(document.querySelector("#main")).setOption({
    // option 每个属性是一类组件。
    xAxis: { type: "category" },
    yAxis: {},
    dataset: {
        source: [
            ["h", 34, 20, "XX", 52],
            ["a", 12, 20, "XX", 52],
            ["b", 33, 20, "XX", 52],
            ["d", 44, 20],
            ["e", 55, 20],   
            ["f", 66, 20],
            ["g", 88, 20],
        ],
    },
    series: [
        // 数据从dataset中取，encode中的数值是dataset.source的维度index
        {
            type: "pie",
            center: ["65%", 60],
            radius: 35,
            encode: { itemName: 3, value: 4 },
        },
        {
            type: "line",
            encode: { x: 0, y: 1 },
        },
        {
            type: "bar",
            encode: { x: 0, y: 2 },
        },
    ],
});

组件

option中的每一个属性都称为组件

option的常用属性：

title指定图标的标题
tooltip提示框组件
toolbox工具栏组件
legend图表的分类类型
xAxis横坐标的参数
yAxis纵坐标的参数，一般来说横/纵坐标指要一个设置了即可
series图表的数据
grid直角坐标系底板
angleAxis极坐标角度轴
radiusAxis极坐标系半径轴
polar极坐标底板
geo地理坐标系
dataZoom数据区缩放组件
visualMap视觉映射组件

用option描述图表

使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

组件的定位

不同的组件，系列常有不同的定位方式

类似CSS的绝对定位

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。

Javascript

echarts.init(dom).setOption({
    grid: {
        left: 130,	
        right: "30%",
        height: "40%",
        bottom: 100
    }
})

中心半径定位

少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。

中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。

坐标系

只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：

个性化图表样式

南丁格尔图

我觉得不好看。。。

只需再属性中添加roseType:"angle"这条属性即可

添加阴影

ECharts中有一些通用的样式，阴影透明度，颜色，边框颜色等。这些样式一般都在itemStyle里设置

emphais是鼠标hover时候的高亮样式

Javascript

itemStyle: {
    // 设置扇形的颜色
    color: "gray",
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    // 鼠标hover之后的样式
    emphasis: {
        shadowBlur: 200,
        shadowColor: "#000"
    }
}

背景颜色和浅色标签

背景颜色是全局的，所以直接再option下设置backgroundColor
文本的样式可以设置全局的textStyle
也可以每个系列分别设置，每个系列的文本设置在label.textStyle
饼图的话还要将标签的视觉引导线的颜色设为浅色
跟itemStyle一样，label和labelLine的样式也有emphasis状态

Javascript

setOption({
    // 背景颜色
    backgroundColor: "#ccc",
    // 文本样式
    textStyle: {
        color: "black"
    },
   	label: {
        textStyle: {
            color: "red"
        }
    },
    labelLine: {
        lineStyle: {
            color: "blue"
        }
    }
})

设置单独扇形块的样式

ECharts中每个扇形颜色的可以通过分别设置data下的数据实现

Javascript

data: [{
    value: 400,
    name: "HTML",
    itemStyle: {
        color: "blue"
    }
}]

但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。（没明白）

Javascript

visualMap: {
    // 不显示 visualMap 组件，只用于明暗度的映射
    show: false,
    // 映射的最小值为 80
    min: 80,
    // 映射的最大值为 600
    max: 600,
    inRange: {
        // 明暗度的范围是 0 到 1
        colorLightness: [0, 1]
    }
}

图表的样式

主题色

Javascript

1 2	echarts.init(dom,"light"); echarts.init(dom,"dark");

其他的主题，没有内置在ECharts中，需要自己加载。这些主题可以在主题编辑器里访问到，也可以使用这个主题编辑器，自己编辑祖逖，下载来的主题可以这样使用

如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：

Javascript

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});

如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：

Javascript

1
2
3

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

调色盘

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

Javascript

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

异步数据加载和更新

异步加载

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

Javascript

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

loading动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

Javascript

myChart.showLoading();
setTimeout(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
},2000);

数据的动态更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

使用dataset管理数据

ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：

Javascript

series: [
    {
        type: 'bar',
        name: '2015',
        data: [89.3, 92.1, 94.4, 85.4]
    },
    {
        type: 'bar',
        name: '2016',
        data: [95.8, 89.4, 91.2, 76.9]
    },
    {
        type: 'bar',
        name: '2017',
        data: [97.7, 83.1, 92.5, 78.1]
    }
]

于是，ECharts 4 提供了 数据集（dataset）组件来单独声明数据，它带来了这些效果：

能够贴近这样的数据可视化常见思维方式：基于数据（dataset 组件来提供数据），指定数据到视觉的映射（由 encode 属性来指定映射），形成图表。
数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。
数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。
支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

图表交互组件

数据区域缩放组件

『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系（grid）、极坐标系（polar）中实现这一功能。

dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作
dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动
dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。

数据过滤模式的设置不同，效果也不同，
dataZoom 的数据窗口范围的设置，目前支持两种形式：
- 百分比形式：参见 dataZoom.start 和 dataZoom.end。
- 绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。

xAxis: {
    type: "value",
},
yAxis: {
    type: "value",
},
dataZoom: [
    {
        // 这个dataZoom组件，默认控制x轴。
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        start: 10, // 左边在 10% 的位置。
        end: 50, // 右边在 60% 的位置。
    },
],
series: [
    {
        type: "scatter", // 这是个『散点图』
        itemStyle: {
            opacity: 0.5,
        },
        symbolSize: function (val) {
            return val[2] * 40;
        },
        data: [
            ["14.616", "7.241", "0.896"],
            ["3.958", "5.701", "0.955"],
            ["2.768", "8.971", "0.669"],
            ["9.051", "9.710", "0.171"],
            ["14.046", "4.182", "0.536"],
            ["12.295", "1.429", "0.962"],
            ["4.417", "8.167", "0.113"],
            ["0.492", "4.771", "0.785"],
            ["7.632", "2.605", "0.645"],
            ["14.242", "5.042", "0.368"],
        ],
    },
],

type的值

slider是以图表底部的进度条来进行缩放
inside是以鼠标滚轮键对图表进行缩放

移动端自适应

Media Query

Media Query 提供了『随着容器尺寸改变而改变』的能力。

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {
                   minWidth: 200,
                   maxHeight: 300,
                   minAspectRatio: 1.3
            },   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

数据的视觉映射

数据可视化是数据到 视觉元素 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。

jQuery

Mock

应用场景

mock优点

mock的基本使用

phantomjs

ECharts

安装

开始

基础概念

系列

组件

用option描述图表

组件的定位

类似CSS的绝对定位

中心半径定位

坐标系

个性化图表样式

南丁格尔图

添加阴影

背景颜色和浅色标签

设置单独扇形块的样式

图表的样式

主题色

调色盘

异步数据加载和更新

异步加载

loading动画

数据的动态更新

使用dataset管理数据

图表交互组件

数据区域缩放组件

移动端自适应

Media Query

数据的视觉映射

事件和行为