【数据可视化技术】可视化组件与Echarts示例

一、ECharts使用准备

（一）获取ECharts

（二）引入ECharts

（三）图表绘制

由于ECharts可视化基于JavaScript语言，因此掌握一定JavaScript语言的基本知识将有助于对ECharts的学习。对JavaScript不熟悉的，可以访问JavaScript在线教程进行学习。

一、ECharts使用准备

（一）获取ECharts

为了使用ECharts进行数据可视化，需要先获取ECharts。获取方式有以下4种。

（1）根据开发者功能和大小上的不同需求，从官网下载界面选择需要的版本进行下载。如果对文件大小没有要求，可以直接下载完整版本；开发环境建议下载源代码版本，该版本包含了常见的错误提示和警告。

（2）在ECharts的GitHub上下载最新的release版本，在解压出来的文件夹里的dist目录里找到最新版本的ECharts库。

（3）通过npm获取ECharts。

（4）cdn引入，可以在cdnjs、npmcdn或者国内的bootcdn上找到ECharts的最新版本。

（二）引入ECharts

只需要像普通的JavaScript库一样用 script 标签引入，如下述代码第5行。

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
</head>
</html>

（三）图表绘制

获取并引用ECharts后，还需要为ECharts准备一个具备高度和宽度的DOM容器，例如要获取一个宽度为 800px、高度为400px的容器。

javascript 复制代码

<body>
    <div id="a" style="width: 800px;height:400px;"></div>
</body>

然后就可以通过echarts.init方法初始化一个Echarts实例并通过setOption方法生成一个需要的示例。

二、Echarts示例

使用ECharts，可以对数据进行不同形式的可视化处理，使用YouTube数据集可以展现出一些常见的数据可视化实例。

（一）柱状图

柱状图，是一种以长方形的长度为变量的表达图形的统计报告图，由一系列高度不等的纵向纹理矩形表示数据分布，主要用来比较两个或以上的不同时间或者不同条件值。柱状图也可横向排列，或用多维方式表达。柱状图简单明了且容易理解，主要反映数据的分布差异性。

可以使用series[i]-bar在 ECharts 中实现柱状图，ECharts 柱状图是通过柱形的高度来表现数据的大小，柱状图可以应用在直角坐标系上，该直角坐标系至少需要有一个类目轴或时间轴。下图用柱状图实例展示了在YouTube数据集中不同视频类别数量的对比。

用柱状图可视化不同类型视频分布的代码如下：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YouTube数据集条形图示例</title>
    <style type="text/css">
        #a{
            width: 800px;
            height: 400px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <button>点击查看YouTube数据集柱状图</button>
    //JS文件引入
    <script type="text/javascript" src="/javascripts/ajax-1.0.js"></script>
    <script type="text/javascript" src="/javascripts/echarts.js"></script>
    <script type="text/javascript">
        //初始化操作
        var myChart = echarts.init(document.getElementById('a'));
        var btn = document.querySelector('button');
        //以单击按钮响应函数展现页面
        btn.onclick = function(){
            //通过Ajax请求数据:
            Ajax('JSON').get('/show-data',function(data){
                //数组声明用于接收数据:
                //d1接收视频类型
                var d1 = [];
                //d2接收上传数量
                var d2 = [];
                //接收数据存放在d1中:
                for(var a=0;a<data.length;a++){  
                    d1.push(  
                        data[a].type 
                    ); 
                }
                //接收数据存放在d2中:
                for(var a=0;a<data.length;a++){  
                    d2.push(  
                        data[a].times 
                    ); 
                }
                //指定图表配置项和相关数据
                var option = {
                    //标题
                    title: {
                        text: '使用YouTube数据集'
                    },
                    //提示框
                    tooltip: {},
                    //图例
                    legend: {
                        data:['各类型视频上传数量']
                    },
                    xAxis:{
                        data:d1,             
                        axisLabel:{
                            interval:0,
                            //数据名称过长采用rotate将数据类型名以其数值角度倾斜
                            rotate:-20,
                        }
                    },
                    yAxis: {},
                    series: [{
                        name: '各类型视频上传数量',
                        //展现类型为柱状图
                        type: 'bar',
                        data:d2
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            });
        }
    </script>
</body>
</html>

第7～11行定义CSS id属性"a"，并在第15行<div id="a"></div>使用这个id属性。

第19行引入echart.js；第20～78行引入绘制柱状图的JavaScript代码。

第22行初始化在第15行设置的绘图区域，为后续绘制做准备。

第25行给单击按钮事件增加回调函数。

第27～43行通过Ajax的get方法请求JSON数据，并解析存储在两个数组中；本实例获取的JSON数据如下所示，其中type为视频类型，times为各类型视频的上传数量。

javascript 复制代码

{"type":"UNA","times":32},                                     
{"type":"Autos & Vehicles","times":77},
{"type":"Comedy","times":414},                                 
{"type":"Education","times":65},
{"type":"Entertainment","times":908},                          
{"type":"Film & Animation","times":260},
{"type":"Howto & Style","times":137},                          
{"type":"Music","times":862},
{"type":"News & Politics","times":333},                        
{"type":"Nonprofits & Activism","times":42},
{"type":"People & Blogs","times":398},                         
{"type":"Pets & Animals","times":94},
{"type":"Science & Technology","times":80},                    
{"type":"Sports","times":251},
{"type":"Travel & Events","times":112}

第46～73行，设置绘制柱状图的属性，并在第75行通过setOpetion方法传递给在第22行已经初始化的myChart对象，Echarts将完成图表的绘制。

以上绘制过程基本是所有Echarts绘图的通用过程，不同图的类型及数据的设置在第46～73行定义的option对象中。

第46～73行声明的option对象中包括title、tooltip、legend、xAxis、yAxis等属性，这些属性以键值对的形式表示，值也是一个对象；多个键值对之间用逗号分开。xAxis、yAxis和series设置是图表的关键。在xAxis属性中设置x轴的数据以及标签显示属性。series描述了在设置好的x轴和y轴约束的平面上绘制图形数据。series的值是一个对象数组，对象与对象之间用都逗号分开；需要数字每个元素指定数据（第70行）和绘图类型为'bar'（第69行）。在此例中series数字只有一个对象元素，是绘制d2指定的柱状图。若此处指定多个对象，则在x轴指定数据标签上可以绘制多组数据，并且可以为它们指定不同绘图类型。

（二）折线图

折线图是用折线显示随某一变量（例如时间）而变化的连续数据的图例。非常适用于显示在相等时间间隔下数据的趋势变化，尤其是那些趋势比单个数据点更重要、需要多个二维数据集的比较的场合。在ECharts中给option对象series属性元素对象的type属性设置为"line"用于表示 ECharts 图表中的折线/面积图，折线/面积图是用折线将各个数据点标志连接起来的图表，在 ECharts 直角坐标系和极坐标系上的使用较为广泛。比较不同类别视频的上传时间和上传数量的关系时，可以使用折线图实现（见下图）。

绘制折线图的代码与绘制柱状图的代码类似，请求服务器端show-data2数据，数据格式为：

javascript 复制代码

{"age":"200-400","sum":9,"sum2":55,"sum3":123},
{"age":"400-600","sum":47,"sum2":166,"sum3":388},
{"age":"600-800","sum":134,"sum2":289,"sum3":555},
{"age":"800-1000","sum":190,"sum2":522,"sum3":698},
{"age":"1000-1200","sum":529,"sum2":699,"sum3":999}

其中age的值作为横坐标展现在x轴上，sum、sum2、sum3分别表示三种类型的视频的上传数量。将x轴和y轴数据分别存储在对象d1、d2、d3和d4中。option设置代码如下：

javascript 复制代码

var option = {
    tooltip : {
        //trigger为axis时显示该列下所有坐标轴所对应的数据
        trigger: 'axis'
    },
    legend: {
        data:['娱乐类视频上传历史时间与数量关系图']
    },
    xAxis : [
        {
            Name:'视频上传数',
            data : d1
        }
    ],
    yAxis : [
        {
            Name:'上传历史时间',
            type : 'value'
        }
    ],
    series : [
        {
            name:'运动类',
            //数据展现形式为折线图
            type:'line',
            data:d2
        },
        {
            name:'音乐类',
            type:'line',
            data:d3
        }
        {
            name:'娱乐类',
            type:'line',
            data:d4
        }

    ]
};

与柱状图的关键区别在第25行，series第一个元素type属性设置为'line'。本示例绘制了三种类型视频的上传数与上传历史时间关系，在option中设置提示框tooltip的触发方式为'axis',，即坐标轴触发。横坐标xAxis设置为视频的上传历史时间，纵坐标yAxis设置为视频的上传数。series中的数据为三种不同类型的视频（第22～37行）。

（三）饼状图

通过将圆形划分成几个扇形，来描述数量或百分比的关系，扇形的大小与数量的大小成比例，所有扇形正好组成一个完整的圆。饼状图适用简单的占比图，且在不要求数据精细的情况适用，尤其适合渠道来源等场景。

对于YouTube数据集，可以使用饼状图直观地看出视频类型和对应评论数之间的关系，如下图所示。

Option对象属性设置代码如下。

javascript 复制代码

option = {
    title : {
        text: 'YouTube数据集饼状图示例',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
    },
    legend: {
        //图例布局方式 默认为水平 这里由于统计项较多 选择垂直显示
        orient: 'vertical',
        //将图例放在左侧显示
        left: 'left',
        //图例数据
        data: d1
    },
    series : [
        {
            name: 'YouTube类型评论数关系',
            //选取图例为饼状图
            type: 'pie',
            //设置饼状图的大小
            radius : '50%',
            //设置饼状图显示位置
            center: ['50%', '50%'],
            //将获取的数据放在data中
            data:d2,
        }
    ]
};

饼图不需要设置xAxis和yAxis属性，但legend属性则特别重要，根据数据项的数量，选择不同图例放置的位置以便体现图例的美观性。

第9～16行为legend设置，其data属性设置为获取的数据d1，d1为数据中的name字段对应值，作为图例数据显示。为了方便使用接收的数据我们可以自定义数组进行接收d1，后面用到的d2同样可以采用类似得到方法完成。在series中data设置为d2，其每一个数据项包含了一个value属性和一个name属性，value为对应类型视频的评论数、name为视频的类型名称，数据格式如下所示。

javascript 复制代码

{"value":13206, "name":"UNA"},
{"value":2534, "name":"Autos & Vehicles"},
{"value":318602, "name":"Comedy"},
{"value":4724, "name":"Education"},
{"value":737023, "name":"Entertainment"},
{"value":101346, "name":"Film & Animation"},
{"value":125948, "name":"Howto & Style"},
{"value":1222444, "name":"Music"},
{"value":141840, "name":"News & Politics"},
{"value":3660, "name":"Nonprofits & Activism"},
{"value":110439, "name":"Pets & Animals"},
{"value":220878, "name":"People & Blogs"},
{"value":73580, "name":"Science & Technology"},
{"value":86272, "name":"Sports"},
{"value":51534, "name":"Travel & Events"}

在柱状图和折线图中，将其设置在xAxis对象中。对于饼状图，在series属性设置第一个对象的type为pie，数据设置为接收的对应数据，以及半径、原点的值。其他部分与柱状图与折线图类似。

（四）散点图

散点图适用于显示若干数据系列中各数值之间的关系，类似xy轴，判断两变量之间是否存在某种关联。其优势在于处理数值的分布和数据点的分簇。如果数据集中包含非常多的点，那么散点图便是最佳图表类型，但散点图显示多个序列看上去非常混乱。如果需要查看YouTube中每种视频的评论数和评分关系时可以使用散点图，并把散点半径设定为观看数量，如下图所示。可以看出似乎视频的观看数量多的不一定是评分高和评论数多的。

实现的关键代码如下：

javascript 复制代码

btn.onclick = function(){                                                 
    //通过Ajax请求数据:                                                     
    Ajax('JSON').get('/show-data4',function(data){
        option = {
            title: {
            text: 'YouTube评论与评分关系',
            x:'center'                                                    
            }, 
            xAxis: {
            },
            yAxis: {
            },
            series: [{
                data: data,
                //图表类型为散点图
                type: 'scatter',
                symbolSize: function (data) {
                    //控制散点大小 使其完整地展现于用户眼前
                    return Math.sqrt(data[2]) / 1e2;
                },
                //鼠标悬停标签
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (youtubedata) {
                            //返回值设定为视频类型
                            return youtubedata.data[3];
                        },
                        //在散点上方显示标签
                        position: 'top'
                    }
                },
            },]
        };
        // 使用指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
}

本示例中我们使用Ajax的get方法（第3行）从show-data4取回的数据有4列，接收到的数据格式形式如下所示：

javascript 复制代码

[845,512,1762368, "Autos & Vehicles"]

对于每一个数据：数据第一项为评论数、第二项为评分数，第三项为观看数，最后一项为视频类型。第16行type设置为'scatter'，第17～19行设置散点半径，其中1e2代表将数据值缩小为原数据值11100从而达到控制散点大小的效果。

第22～32行为散点图增加鼠标悬停标签，这里主要设置了散点对应的视频类型（第27行）和标签的显示位置为top（第30行）。

第36～38行使用myChart.setOption（option）完成图例的显示。

（五）热力图

热力图以特殊高亮的形式显示访客热衷访问的页面区域和访客所在的地理区域的图示。热力图可以显示不可点击区域发生的事件。

可以使用热力图查看YouTube数据集中各类型视频观看量排名前三的视频的评论数关系，如下图所示。

核心代码如下。

javascript 复制代码

btn.onclick = function(){
    //通过Ajax请求数据:
    Ajax('JSON').get('/show-data5',function(data){
        console.log(data[0][0]);
        //数组声明用于接收数据:
        var type = [];
        var rank = [];
        //接收y轴数据:
        for(var a=0;a<data[1].length;a++){  
            type.push(  
                data[1][a] 
            );  
        }
        //接收x轴数据:
        for(var a=0;a<data[2].length;a++){  
            rank.push(  
                data[2][a]
            );  
        }
        //指定图表配置项和相关数据
        data = data[0].map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });
        option = {
            title: {
                //视图标题
                text: 'YouTube数据热力图示例',
                x:'center'
            },
            animation: false,
            grid: {
                height: '50%',
                y: '10%'
            },
            //横坐标显示数据
            xAxis: {
                data: rank,
            },
            //纵坐标显示数据
            yAxis: {
                data: type,
            },
            //视觉映射器设置
            visualMap: {
                min: 0,
                max: 50000,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '25%'
            },
            series: [{
                //图表类型为热力图
                type: 'heatmap',
                data: data,
                label: {
                    normal: {
                        show: true
                    }
                },
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
}

在option对象中指定xAxis和yAxis的属性和数据，第59行设置type为'heatmap'。请注意查询数据类型。在热力图中通常需要设置一个视觉映射器visualMap反应数值范围对应的热衷程度：颜色由浅到深，数值有小到大，本示例中的视觉映射器为第44～51行，设置最小值为0，最大值为50000，可计算性为true，颜色默认为黄色到红色，位置为底部中心水平显示。

本示例中获取的数据可以分为三个部分，分别对应x轴显示数据、y轴显示数据和热力图主体部分数据。

x轴数据为视频观看量的排名：

javascript 复制代码

["观看量第一名", "观看量第二名", "观看量第三名"]

y轴数据为视频类型：

javascript 复制代码

[
            "UNA",                       
            "Autos & Vehicles", 
            "Comedy",                    
            "Education",
            "Entertainment",             
            "Film & Animation", 
            "Howto & Style",             
            "Music",
            "News & Politics",           
            "Nonprofits & Activism",
            "People & Blogs",            
            "Pets & Animals",
            "Science & Technology",      
            "Sports",
            "Travel & Events"
]

热力图主体部分的数据为核心部分，数据的格式为：

javascript 复制代码

[
            [0,0,487],[0,1,1328],[0,2,648],
            [1,0,845],[1,1,414],[1,2,333],
            [2,0,30666],[2,1,6938],[2,2,29160],
            [3,0,816],[3,1,1289],[3,2,257],
            [4,0,259683],[4,1,14274],[4,2,22567],
            [5,0,5508],[5,1,4235],[5,2,572],
            [6,0,29786],[6,1,6605],[6,2,5281],
            [7,0,50036],[7,1,17731],[7,2,129200],
            [8,0,1646],[8,1,4164],[8,2,6403],
            [9,0,149],[9,1,345],[9,2,51],
            [10,0,17602],[10,1,881],[10,2,3983],
            [11,0,24004],[11,1,39418],[11,2,12034],
            [12,0,6093],[12,1,2598],[12,2,185],
            [13,0,14602],[13,1,1041],[13,2,232],              
            [14,0,19461],[14,1,1852],[14,2,2993]
]

对于x轴和y轴数据的显示较为简单，可以使用数组接收后直接在xAxis和yAxis中设置即可完成。对于热力图主体部分的数据中每一个数据项来说：前两个数值决定了数据显示位置，第三个数值表示观看次数。例如，[2,0,30666]表示类别为Comedy的视频中观看量第一名的观看数为30666次。

（六）桑基图

桑基图，即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。可以使用桑基图表示YouTube数据集的构成，如下图所示。

核心代码如下。

javascript 复制代码

btn.onclick = function(){
    //通过Ajax请求数据:
    Ajax('JSON').get('/show-  data6',function(data){
        //获取数据源名称
        var mydata = data[0].name;
        option = {
            title: {
                //视图标题
                text: 'YouTube数据集构成',
                x:'left'
            },
            series: {
                //图表类型为桑基图
                type: 'sankey',
                layout:'none',
                data: data,
                //关联数据
                links: [{
                    source: mydata,
                    target: data[1].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[2].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[3].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[4].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[5].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[6].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[7].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[8].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[9].name,
                    value: 1
                }, {
                    source: mydata,
                    target: data[10].name,
                    value: 1
                }]
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
}

第3行使用Ajax的get方法获取数据，请求url为show-data6，使用桑基图进行数据展示。

第14行，在series中的type属性设置为'sankey'。

为了进行数据关联我们需要设置数据源，本示例在第5行获取，其值为数据集结构，并在第18～58行进行关联数据。每一次关联包含三个属性：source、target和value。其中source为出发点、target为目标、value为对应数值。

本示例中获取的数据格式为{"name": "数据集结构"}，name属性为桑基图展示的各数据的名称。

（七）雷达图

雷达图，又称为戴布拉图、蜘蛛网图。雷达图适用于多维数据（四维以上），且每个维度必须可以排序，可以用来了解公司各项数据指标的变动情形及其好坏趋向。它的劣势为理解成本较高。

为了直观显示出YouTube数据集中不同类型视频的各项数据的平均值情况，可以选取雷达图进行数据可视化展示，如下图所示。由下图可以看出教育类视频相比其他两类视频并不怎么受到热捧。

核心代码如下。

javascript 复制代码

btn.onclick = function(){
    //通过Ajax请求数据:
    Ajax('JSON').get('/show-data7',function(data){
        option = {
            legend: {
                //垂直方式显示
                orient: 'vertical',
                //图例位置
                padding: 80,
                //将图例放在左侧显示
                left: 'left',            
                data: ['Comedy', 'Education','Entertainment']
            },
            radar: {
                name: {
                    //文本样式设置
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 2,
                        padding: [2, 3]
                    }
                },
                //指示器设置
                indicator: [
                    { name: '上传平均间隔', max: 1100},
                    { name: '视频平均长度', max: 260},
                    { name: '平均观看数', max: 220000},
                    { name: '平均率', max: 4},
                    { name: '平均评分', max: 10},
                    { name: '平均评论数', max: 1000}
                ]
            },
            series: [{
                //样式为雷达图
                type: 'radar',
                //使用YouTube数据集数据
                data : data
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
}

第3行通过Ajax的get方法获取数据，请求url为show-dat。

第5～13行进行图例设置，包括图例的显示位置和数据。

第14～33行进行雷达图的默认配置，其中indicator（第25～33行）是雷达图特有的重要属性，作为指示器给出了数据的名称和最大值，针对不同数据的取值范围，可以选择不同的max值使图表更加直观，从而更好地完成数据可视化。

第36行设置图表类型为'radar'，并在38行使用获取到的数据data，本示例中获取的数据格式为：

javascript 复制代码

{
    "value" : [935, 192, 211654, 3.5, 9.31, 769],
    "name" : "Comedy"
}

其中value表示雷达图各个属性的数值，name表示对应的视频类型。即类型为comedy的视频的上传平均间隔为935s、视频的平均长度为192s、视频的平均观看数为211654次、视频的平均得分数为9.31分、视频的平均评论数为769个。