百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

统计图形(I) - 网络统计学

bigegpt 2025-02-15 14:36 8 浏览

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

一、统计图形、类型和结构

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) - 网络统计学

相关推荐

崩溃!改了十遍还是错?4 组 Vue 技巧让你秒变大神

凌晨一点,办公室只剩键盘敲击声和空调的嗡鸣。盯着屏幕上反复报错的Vue项目,咖啡凉了又热,改完的Bug却像打地鼠一样冒出来——这是不是你无数个加班夜的缩影?别担心!今天分享4组超实用的...

Vue3基础难点总结

区别生命周期的变化整体来看,变化不大,只是名字大部分需要+on,功能上类似。使用上Vue3组合式API需要先引入;Vue2选项API则可直接调用,如下所示。//vue3<s...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

Vue3 要起飞了!响应式性能超级大提升!

在Vue.jsNation2025上,尤大大公布了Vue3.6的更新内容:1、响应式性能的大幅度提升2、Vapor模式(实验性)3、内部类型的简化1、响应式性能的大幅度提升Vue3.6...

前端人必收!10 个 Vue3 隐藏技巧,解决 99% 开发卡顿?

写Vue3项目时,是不是总遇到数据更新慢、组件通信乱、打包体积大的问题?别慌!今天带来10个连老前端都直呼“真香”的实战技巧,从性能优化到代码复用,全是能直接抄进项目的硬核方案,看完开发效...

对于Vue3和Ts的心得和思考

1前言Vue3已经正式发布了一段时间了,各种生态已经成熟。最近使用taro+vue3重构冷链的小程序,经过了一段时间的开发和使用,有了一些自己的思考。总的来说,Vue3无论是在底层原理还是在实际开发...

vue3还用this吗?getCurrentInstance获取当前组件实例

在Vue2中,this关键字代表当前组件实例。在组件的选项对象中,this可以用于访问组件实例的属性、方法以及Vue实例的一些特定方法。在Vue3中,我们发现this是undefined...

Vue3快速入门

  1.核心语法  1.1选项式和组合式的区别  Vue2的API设计是Options(选项)风格的。  Vue3的API设计是Composition(组合)风格的。  Options类型的API...

Vue 3 进阶用法:异步组件

一、代码分割一个大型前端应用,如果所有代码都放在单一文件,体积会特别大,下载时间长,白屏时间久,用户体验差。代码分割(CodeSplitting)是一种有效的优化方式。提前把代码切分为多个小块,只下...

如何在 Vue3 中更好地使用 Typescript

TypeScript为Vue应用带来了强大的类型系统支持,Vue3更是从底层开始使用TypeScript编写。本文将介绍Vue3中自带的TypeScript类型工具及其最佳实践,通...

Vue3 页面卡顿严重?7 个实战技巧让渲染速度飙升 80%!

作为前端工程师,你是不是经常遇到这样的糟心事:明明用着最新的Vue3框架,页面却卡得像蜗牛,用户疯狂吐槽体验差,自己调试半天也找不出原因?别慌!今天就分享7个超级实用的Vue3性能优化实战...

最近很火的Vue Vine是如何实现一个文件中写多个组件

前言在今年的VueConf2024大会上,沈青川大佬(维护Vue/Vite中文文档)在会上介绍了他的新项目VueVine。VueVine提供了全新Vue组件书写方式,主要的卖点是可以在一个文...

vue3新手入门(9)vue3中的强大功能使用hooks示例

今天学习下vue3的自定义hooks,自定义Hooks是一种非常灵活的方式来组织和重用组件逻辑。它们本质上就是普通的JavaScript函数,可以在组件的setup()函数中被调用,并返回...

在vue3中动态加载远程组件

前言在一些特殊的场景中(比如低代码、类似于APP的热更新),我们需要从服务端动态加载.vue文件,然后将动态加载的远程vue组件渲染到我们的项目中。今天这篇文章我将带你学会,在vue3中如何去动态加载...

崩溃!组件数据总丢失?5 组 Vue2/3 对比技巧颠覆认知

凌晨两点,办公室只剩下键盘敲击声和咖啡机的嗡鸣。盯着屏幕上报错的Vue项目,反复检查代码却找不出问题——数据突然消失、组件莫名重新渲染,这些“玄学”问题是不是让你血压飙升?别慌!今天带来...