EChart.js 笔记一

　　一直对数据可视化比较感兴趣，当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座，够震撼，将数据之美展现得淋漓尽致。

　　国内的前端数据可视化插件中，echart.js 算是热度很高的，也容易上手，算是新手福利吧；D3.js 源于国外，长于定制，看评价多是倾向于这个方面的。先不管这些，先入手 echart.js。

一、安装

　　大致分两类：

　　　　1.<script> 直接引入本地或者cdn上的 echart(.min).js 文件，是本文中使用的方法；

　　　　2. npm 获取，详见点击comb！；

二、基本使用

　　1.首先在 body 中准备一个容器：

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

　　2.引入 echart.js 文件： <script> 标签引入

　　3.基本结构(贴个小demo)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的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>
</body>

三、异步加载数据和更新

　　1.异步加载也比较简单，通过 ajax 请求数据，并将数据和配置填入 setOption 即可。

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {　　　　// 先声明
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});
 
// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

　　上面的思路是先将空的坐标系画出来，获取数据后在填入进去，另外一条思路是先获取数据，在配置各项目，代码层面是将 setOption 全部写在 ajax 逻辑内部，但这样很容易造成页面的区域性空白，故不推荐这种思路。

　　注意：在数据的更新时需要通过 name 属性对应到相应的系列，更推荐在配置时加上 series 中的 name 。

　　2.对于加载过程的优化：

　　数据加载过程中往往出现各种问题导致加载过程变长，这就很容易产生用户体验问题，echart.js中内置了一个简单加载过渡动画的 api：

　　请求数据前调用 showLoading 方法，数据加载完成后调用 hideLoading 方法隐藏加载动画即可。

// 调用 showLoading 方法
myChart.showLoading();
 
$.get('data.json').done(function (data) {
    // 调用 hideLoading 方法
    myChart.hideLoading();
    myChart.setOption(...);
});

　　3.数据的动态更新

　　　　使用定时器（setInterval）定时请求数据并更新 setOption 即可。动态更新实例

四、dataset 管理数据

　　Echart 4 以前，数据需要在各个 series 中声明，这中方式直观易理解，但是缺点是不利于多个系列共享等。

　　而从 4 开始，提供数据集（dataset）来声明数据，可以完成诸如：共享、分割数据等操作。

官方的入门例子：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据，此处是二维数组。
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

或者：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

　　建议： dataset 中 source 是数组，建议将数据模拟成二维排列，这样在整个 dataset 的学习过程中比较容易理解。

行、列映射

　　dataset 的 source 中数据可以大致看成是一个二维排列的数组，那是怎么将数组中的数据与图表对应的呢？

用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：
 
'column': 默认值。系列被安放到 dataset 的列上面。
'row': 系列被安放到 dataset 的行上面。
  

官方栗子：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},       // 坐标系1
        {type: 'category', gridIndex: 1}        // 坐标系2
    ],
    yAxis: [
        {gridIndex: 0},             // 坐标系1
        {gridIndex: 1}              // 坐标系2
    ],
    grid: [
        {bottom: '55%'},         // 坐标系1 距离底部距离
        {top: '55%'}               // 坐标系2 距离顶部距离
    ],
    series: [
        // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行，即将 source 中的行作为 x 轴。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}

数据映射到图形（encode）

官方栗子：

var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    // 注意下面两行的写法；
    xAxis: {},
    yAxis: {type: 'category'},
    series: [
        {
            type: 'bar',
            encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'amount',
                // 将 "product" 列映射到 Y 轴。
                y: 'product'
            }
        }
    ]
};

　　放一个官网实例（数据量巨大）：数据图；

　　encode 的具体配置以及值：

// 例如在直角坐标系（grid/cartesian）中：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0,
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用 “维度 3” 的维度名作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: 3,
    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}
 
// 对于极坐标系，可以是：
encode: {
    radius: 3,
    angle: 2,
    ...
}
 
// 对于地理坐标系，可以是：
encode: {
    lng: 3,
    lat: 2
}
 
// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}
  

实例：

　　1.南丁格尔（饼）图：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echart-coxcomb</title>
</head>
<body>
    <p>南丁格尔图是饼图的一种</p>
    <div id="main" style="width: 600px;height: 400px;"></div>
 
    <script type="text/javascript" src="../../jslib/echarts.js"></script>
    <script type="text/javascript">
        // 初始化 echart 实例 
        var myChart = echarts.init(document.getElementById('main'));
         
        // 指定图表的配置项和数据
        var option = {
            // 设置全局背景色，注意与下面阴影的关系
            backgroundColor: '#2c343c',
            // 将数据映射到扇形的明暗程度上
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',    // 通过 type 来控制图表种类
                    radius: '75%',  // 图表大小
                    data: [
                        {value: 235, name: '视频广告'},
                        {value: 274, name: '联盟广告'},
                        {value: 310, name: '邮件营销'},
                        {value: 335, name: '直接访问'},
                        {value: 400, name: '搜索引擎'}
                    ],
                    roseType: 'angle',  // 将饼图以南丁格尔图形式展示
                    itemStyle: {
                        normal: {
                            // 饼图扇形的颜色
                            color: '#c23531',
                            // 设置阴影大小
                            shadowBlur: 100,
                            // 设置阴影颜色
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    },
                    label: {
                        normal: {
                            // 文本标签的字体颜色
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    },
                    labelLine: {
                        normal: {
                            // 文本标签的视觉引导线颜色
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    }
                }
            ]
        };
 
        // 使用配置项并显示图像
        myChart.setOption(option);
    </script>
</body>
</html>