程序员开发实例大全宝库

网站首页 > 编程文章 正文

统计图形(eCharts) - 网络统计学(5)

zazugpt 2024-10-11 21:01:44 编程文章 15 ℃ 0 评论

统计图是根据统计数据，用几何图形、形象事物和地图等绘制的各种图形。统计图形具有直观、形象、生动、具体等特点，可以使复杂的统计数据简单化、通俗化、形象化，使人一目了然，便于理解和比较。统计图在统计资料整理与分析中占有重要地位，并得到广泛应用。

一、统计图形的种类和结构

大数据时代，数据可视化方法大大突破了传统统计学中的几类（散点图、折线图、饼图、柱状图）图形。数据可视化是连接用户和数据的桥梁，是用户展示数据处理成果的一种手段，有非常广泛的应用和创建途径。

1、统计图形

统计图形是利用点、线、面、体等绘制成几何图形，以表示各种数量间的关系及其变动情况的工具。常用的统计图有条形统计图、扇形（饼图）统计图、折线统计图、散点图等。在统计学中把利用统计图形表现统计资料的方法叫做统计图示法。

按图形的数字性质分类，有实数图、累积数图、百分数图、对数图、指数图等；其结构包括图名、图目(图中的标题)、图尺(坐标单位)、各种图线(基线、轮廓线、指导线等)、图注(图例说明、资料来源)等。

2、eCharts

eCharts商业级数据图表是一个纯Javascript的开源图表库，最初由百度商业前端数据可视化团队负责开发维护。可以流畅的运行在PC和移动设备上。

底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。由eCharts生成的图形为展示统计数据提供了完美解决方案。

3、JSON

JSON是一种轻量级的数据交换格式,采用完全独立于语言的格式化文本。JSON格式文本易于人阅读和编写，同时也易于机器解析和生成。Json的规格非常简单，只用一个页面几百个字就能说清楚（参见JSON数据交换格式），这些特性使JSON成为理想的数据交换语言。JSON被作为用户和eCharts间数据交换语言，用户需求通过JSON命令描述图形特征和数据，eCharts解析JSON指令后输出图形到浏览器。

二、eCharts网页绘图

1、网页中使用eCharts绘图

在网页中设置图形容器：

<div id="oChart" style="height:300px; width:80%;"></div>

在JavaScript代码中：

var myChart = echarts.init(document.getElementById("oChart"));
// 基于准备好的dom，初始化echarts实例
var option = {} // 指定图表的配置项和数据
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表

网页中使用eCharts案例【eChartS Code-01】：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head><body>
<p>eCharts图形示例</p>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
         // 用JSON指定图表的配置项和数据
        var option = {
        title: {text: 'ECharts 入门示例'},
        legend: {data:['销量']},
        xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
        yAxis: {},
        series: [{name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body></html>

显示效果，

利用eCharts绘图主要是用JSON设置option对象来定义统计图形（主要是设置“数据”和“设置”两项内容）。Code-01中option对象代码部分，

var option = {
        title: {text:数据较多时， 'ECharts 入门示例'},
        legend: {data:['销量']},
        xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
        yAxis: {},
        series: [{name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
    };

注：option对象代码完全按JSON语法格式配置，设置不同统计图形只要在网页中替换option对象代码即可

Code-01中数据（data: [5, 20, 36, 10, 10, 20]）较少，被直接放在option的series数组中。data往往会分离定义，option主要是设置“数据”和“设置”两项内容正是此意。

下面是常用统计图形参数配置案例。

三、eCharts常用统计图形配置

1、散点图

散点图(scatter diagram)又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布形态反映变量统计关系的一种图形。特点是能直观表现出影响因素和预测对象之间的总体关系趋势。优点是能通过直观醒目的图形方式反映变量间关系的变化形态，以便决定用何种数学表达方式来模拟变量之间的关系。散点图不仅可传递变量间关系类型的信息，也能反映变量间关系的明确程度。

网页中设置散点图案例【eChartS Code-02】：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head><body>
<p>eCharts图形示例</p>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

//指定图表的数据
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]
    ];

//指定图表的配置项
 var option = {
    title : {
        text: '男性女性身高体重分布'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        formatter : function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                   + params.value[0] + 'cm ' 
                   + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                   + 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: '平均值'}
                ]
            }
        }
    ]
  }

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

显示效果，

由于散点图需要数据较多，数组oFemaleData和oMaleData数据被独立定义，在option的series数组中引用这两个变量即可。

对于初学者来说，利用现有图形模板将数据替换为自己的数据即可。为了节省篇幅，本文后面介绍的图形只给出“数据”和“配置”项，读者自己根据Code-01和Code-02替换“数据”和“配置”项即可。

2、折线图

折线图(Line Graph)是用直线段将各数据点连接起来而组成的图形，以折线方式显示数据的变化趋势。折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

【数据】

    var oX = ['周一','周二','周三','周四','周五','周六','周日'];//横轴日期
    var oY1 = [11, 11, 12, 14, 12, 13, 10];//纵轴1
    var oY2 = [1, -2, 2, 5, 3, 2, 0];//纵轴2

【配置】

    var option = {
    title : {text: '未来一周气温变化'},
    tooltip : {
        trigger: 'axis'
    },
    legend: {data:['最高气温','最低气温']},
    toolbox: {show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : oX
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:oY1,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:oY2,
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
}

【效果图】

3、柱状图

柱状图(bar chart)，是一种以长方形的长度为变量的表达图形的统计报告图，由一系列高度不等的纵向条纹表示数据分布的情况，用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。柱状图亦可横向排列，或用多维方式表达。

【数据】

    var oX = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']//月份
    var oY1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];//蒸发量
    var oY2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];//降水量

【配置】

    var option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸发量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : oX
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:oY1,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:oY2,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
}

【效果图】

4、饼图 [返回]

饼图(Pie Graph)显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列）中各项的大小与各项总和的比例。饼图中的数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列）显示为整个饼图的百分比。

【数据】

    var oX = ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'];//图例
    var oY = [//数据
         {value:335, name:'直接访问'},
         {value:310, name:'邮件营销'},
         {value:234, name:'联盟广告'},
         {value:135, name:'视频广告'},
         {value:1548, name:'搜索引擎'}
         ];

【配置】

    var option = {
    title : {
        text: '某站点用户访问来源',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:oX
    },
    toolbox: {show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:oY
        }
    ]
}

【效果图】

上面介绍了运用eCharts设置四类常用统计图形，这只是eCharts功能的冰山一角，eCharts能做的还有很多，例如“热力图”、“雷达图”和“地图”等。

【热力图效果图】

【雷达图效果图】

【地图效果图】

更多配置参考【eChatrs官网】，读者需要具备一定网页编程知识。

【参考文献】

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表