统计图形具有直观、形象、生动、具体等特点，可以使复杂的统计数据简单化、通俗化、形象化，使人一目了然，便于理解和比较。统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。
一、统计图形、类型和结构
1、统计图形
统计图是根据统计数字，用几何图形、事物形象和地图等绘制的各种图形。它具有直观、形象、生动、具体等特点。统计图可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。因此，统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。
统计图形是利用点、线、面、体等绘制成几何图形，以表示各种数量间的关系及其变动情况的工具。常用的统计图有条形统计图、扇形统计图、折线统计图、散点图等。在统计学中把利用统计图形表现统计资料的方法叫做统计图示法。
一般采用直角坐标系，横坐标用来表示事物的组别或自变量x，纵坐标常用来表示事物出现的次数或因变量y；或采用角度坐标(如圆形图)、地理坐标(如地形图)。
按图形的数字性质分类，有实数图、累积数图、百分数图、对数图、指数图等；其结构包括图名、图目(图中的标题)、图尺(坐标单位)、各种图线(基线、轮廓线、指导线等)、图注(图例说明、资料来源等)等。
2、eCharts
eCharts（百度官网：
https://echarts.apache.org/zh/index.html），商业级数据图表，一个纯Javascript的开源图表库，由百度商业前端数据可视化团队负责开发维护。可以流畅的运行在PC和移动设备上。
底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。由eCharts生成的图形为展示统计数据提供了完美解决方案。
3、JSON
JSON是一种轻量级的数据交换格式,采用完全独立于语言的格式化文本。JSON格式文本易于人阅读和编写，同时也易于机器解析和生成。Json的规格非常简单，只用一个页面几百个字就能说清楚（JSON数据结构 - 网络统计学编程），这些特性使JSON成为理想的数据交换语言。JSON被作为用户和eCharts间数据交换语言，用户需求通过JSON命令描述图形特征和数据，eCharts解析JSON指令后输出图形到浏览器。
二、eCharts网页绘图
1、网页中使用eCharts绘图
在网页中设置图形容器：
在JavaScript代码中：
var myChart = echarts.init(document.getElementById("oChart"));
// 基于准备好的dom，初始化echarts实例
// 指定图表的数据项
var option = {} // 指定图表的配置项
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表#Code eChartS01：网页中使用eCharts案例
ECharts
eCharts官网：https://echarts.apache.org/zh/index.html
保存Code eChartS01代码到本地，运行结果如下：
2、eCharts统计图形模板
eCharts分为不同版本（详解参见eCharts官网）。不同版本eCharts图形风格区别较大。
在Code eChartS01代码中，将echarts的Javascript链接库文件
更换为
保存Code eChartS01代码到本地，运行结果如下：
3、散点图（数据和配置）
散点图(scatter diagram)又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布形态反映变量统计关系的一种图形。特点是能直观表现出影响因素和预测对象之间的总体关系趋势。优点是能通过直观醒目的图形方式反映变量间关系的变化形态，以便决定用何种数学表达方式来模拟变量之间的关系。散点图不仅可传递变量间关系类型的信息，也能反映变量间关系的明确程度。
【数据】
var oFemaleData = [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2],
[172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8],
[168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
];
var oMaleData = [
[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6],
[187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4],
[175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6],
[192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6],
[192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
];【配置option】
var option = {
title : {
text: '男性女性身高体重分布'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
formatter : function (params) {
if (params.value.length > 1) {
return params.seriesName + ' :
'
+ params.value[0] + 'cm '
+ params.value[1] + 'kg ';
}
else {
return params.seriesName + ' :
'
+ params.name + ' : '
+ params.value + 'kg ';
}
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:['女性','男性']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value} cm'
}
}
],
yAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value} kg'
}
}
],
series : [
{
name:'女性',
type:'scatter',
data: oFemaleData,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'男性',
type:'scatter',
data: oMaleData,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
}将【数据】和【配置】项加入网页文档，
【文档】
ECharts
eCharts官网：https://echarts.apache.org/zh/index.html
【图形】
利用eCharts绘图主要是设置【数据】和【配置】两项数据，在网页文档中，通常将【数据】代码放在【配置】代码前面。
下一篇：统计图形（II） - 网络统计学
