百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

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

bigegpt 2024-10-20 04:25 2 浏览

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

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

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

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官网】，读者需要具备一定网页编程知识。

【参考文献】

相关推荐

Java 泛型大揭秘:类型参数、通配符与最佳实践

引言在编程世界中，代码的可重用性和可维护性是至关重要的。为了实现这些目标，Java5引入了一种名为泛型（Generics）的强大功能。本文将详细介绍Java泛型的概念、优势和局限性，以及如何在...

K8s 的标签与选择器:流畅运维的秘诀

在Kubernetes的世界里，**标签（Label）和选择器（Selector）**并不是最炫酷的技术，但却是贯穿整个集群管理与运维流程的核心机制。正是它们让复杂的资源调度、查询、自动化运维变得...

哈希Hash算法:原理、应用（哈希算法 知乎）

原作者：Linux教程，原文地址：「链接」什么是哈希算法？哈希算法（HashAlgorithm），又称为散列算法或杂凑算法，是一种将任意长度的数据输入转换为固定长度输出值的数学函数。其输出结果通常被...

C#学习:基于LLM的简历评估程序（c# 简历）

前言在pocketflow的例子中看到了一个基于LLM的简历评估程序的例子，感觉还挺好玩的，为了练习一下C#，我最近使用C#重写了一个。准备不同的简历：image-20250528183949844查...

55顺位，砍41+14+3!季后赛也成得分王，难道他也是一名球星?

雷霆队最不可思议的新星：一个55号秀的疯狂逆袭！你是不是也觉得NBA最底层的55号秀，就只能当饮水机管理员？今年的55号秀阿龙·威金斯恐怕要打破你的认知了！常规赛阶段，这位二轮秀就像开了窍的天才，直接...

5分钟读懂C#字典对象（c# 字典获取值）

什么是字典对象在C#中，使用Dictionary类来管理由键值对组成的集合，这类集合被称为字典。字典最大的特点就是能够根据键来快速查找集合中的值，其键的定义不能重复，具有唯一性，相当于数组索引值，字典...

c#窗体传值（c# 跨窗体传递数据）

在WinForm编程中我们经常需要进行俩个窗体间的传值。下面我给出了两种方法，来实现传值一、在输入数据的界面中定义一个属性，供接受数据的窗体使用1、子窗体usingSystem;usingSyst...

C#入门篇章—委托（c#委托的理解）

C#委托1.委托的定义和使用委托的作用：如果要把方法作为函数来进行传递的话，就要用到委托。委托是一个类型，这个类型可以赋值一个方法的引用。C#的委托通过delegate关键字来声明。声明委托的...

C#.NET in、out、ref详解（c#.net framework）

简介在C#中，in、ref和out是用于修改方法参数传递方式的关键字，它们决定了参数是按值传递还是按引用传递，以及参数是否必须在传递前初始化。基本语义对比修饰符传递方式可读写性必须初始化调用...

C#广义表（广义表headtail）

在C#中，广义表（GeneralizedList）是一种特殊的数据结构，它是线性表的推广。广义表可以包含单个元素（称为原子），也可以包含另一个广义表（称为子表）。以下是一个简单的C#广义表示例代...

「C#.NET 拾遗补漏」04:你必须知道的反射

阅读本文大概需要3分钟。通常，反射用于动态获取对象的类型、属性和方法等信息。今天带你玩转反射，来汇总一下反射的各种常见操作，捡漏看看有没有你不知道的。获取类型的成员Type类的GetMembe...

C#启动外部程序的问题（c#怎么启动）

IT&OT的深度融合是智能制造的基石。本公众号将聚焦于PLC编程与上位机开发。除理论知识外，也会结合我们团队在开发过程中遇到的具体问题介绍一些项目经验。在使用C#开发上位机时，有时会需要启动外部的一些...

全网最狠C#面试拷问:这20道题没答出来，别说你懂.NET!

在竞争激烈的C#开发岗位求职过程中，面试是必经的一道关卡。而一场高质量的面试，不仅能筛选出真正掌握C#和.NET技术精髓的人才，也能让求职者对自身技术水平有更清晰的认知。今天，就为大家精心准备了20道...

C#匿名方法（c#匿名方法与匿名类）

C#中的匿名方法是一种没有名称只有主体的方法，它提供了一种传递代码块作为委托参数的技术。以下是关于C#匿名方法的一些重要特点和用法：特点省略参数列表：使用匿名方法可省略参数列表，这意味着匿名方法...

C# Windows窗体(.Net Framework)知识总结

Windows窗体可大致分为Form窗体和MDI窗体，Form窗体没什么好细说的，知识点总结都在思维导图里面了，下文将围绕MDI窗体来讲述。MDI（MultipleDocumentInterfac...

一周热门
最近发表
标签列表