当前位置: 首页 > news >正文

数据可视化高级技术(Echarts)

目录

(一)数据可视化概念及Echarts基础知识

数据可视化的好处:

数据可视化的目标

数据可视化的基本流程

(二)数据图表

类别比较图表:

数据关系图表:

数据分布图表:

时间序列图表:

局部整体图表:

地理空间图表:

(三)整合开发及部署

认识开发者工具

使用步骤(需要记住的五个基本步骤)


(一)数据可视化概念及Echarts基础知识

数据可视化的好处:

        1.清晰有效地传达与沟通信息

        2.更容易洞察隐藏在数据中的信息

        3.信息记录

数据可视化的目标

  • 信 Accuracy    数据客观正确,避免扭曲数据
  • 达 Efficiency Effectiveness     有效地表达数据,并提高效率
  • 雅 Aesthetic    形式与内容和谐统一,有艺术个性

数据可视化的基本流程

        数据可视化流程类似一个特殊的流水线,主要步骤之间相互作用、相互影响。数据可视化流程的基本步骤为确定分析目标、数据收集、数据清洗和规范、数据分析、可视化展示与分析,具体介绍如下。

1. 确定分析目

        根据现阶段的热点时事或社会较关注的现象,确定此次可视化的目标,并根据这个目标进行一些准备工作,如设计贴合目标的问卷。其中,准备工作中主要包括的内容有遇到了什么问题、要展示什么信息、最后想得出什么结论、验证什么假说等。数据承载的信息多种多样,不同的展示方式会使侧重点有天壤之别。只有想清楚以上问题,才能确定需要过滤什么数据、用什么算法处理数据、用什么视觉通道编码等。

2. 数据收

        依照第一步制订的目标收集数据。目前,数据收集的方式有很多种,如从公司内部获取历史数据、从数据网站中下载所需的数据、使用网络爬虫自动爬取数据、通过发放问卷与电话访谈形式收集数据等。

3. 数据清洗和规

        数据清洗和规范是数据可视化流程中必不可少的步骤。首先需要过滤“脏数据、敏感数据,并对空白的数据进行适当处理,其次剔除与目标无关的冗余数据,最后将数据结构调整为系统能接受的方式。

4. 数据分

        数据分析是数据可视化流程的核心,将数据进行全面且科学的分析,联系多个维度,根据类型确定不同的分析思路。数据分析中最简单的方法是一些基本的统计方法,如求和、中值、方差、期望等,而数据分析中复杂的方法包括了数据挖掘中的各种算法。

5. 可视化展示与分

        可视化展示与分析是数据可视化流程中的一个重点步骤。其中,用户需要选择合适的图表对数据进行可视化展示,才能对最后呈现的可视化结果进行分析,直观、清晰地发现数据中的差异,并从中提取出对应的信息,最终根据获取信息提出科学的建议,从而帮助公司运营。

(二)数据图表

选择合适的图标进行你的表达

类别比较图表:

数据关系图表:

数据分布图表:

时间序列图表:

局部整体图表:

地理空间图表:

(三)整合开发及部署

认识开发者工具

        开发者工具是一种辅助编程开发人员进行开发工作的应用软件,在开发工作内部即可辅助编写代码,并管理代码的效率

        开发过程中少不了开发者工具,为了更好地进行编程学习,需要完成开源免费的开发者工具Visual StudioEchart插件载和使用

Echarts下载

1.进入ECharts中文网:https://echarts.apache.org/zh/index.html

使用步骤(需要记住的五个基本步骤)

1.导入ECharts插件

<script type="text/javascript">

2.为ECharts准备一个DOM容器

<div id="main" style="width: 600px;height: 400px;"></div>

3.基于准备好的DOM,初始化echarts实例

var myChart=echarts.init(document.getElementById('main'));

4. 指定图表的配置项和数据(对ECharts进行一些配置)

var option={ }

5.将配置和参数传递给ECharts,显示图表

myChart.setOption(option);

 完成后,添加相关属性即可显示Echarts图表(下面为一个例子展示  -->  南丁格尔玫瑰图 )

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<script src="JS/echarts.js"></script>  
</head>  
<body>  
<div id='main1' style="width:600px;height:400px"></div>  
<script>  
var chartDom = document.getElementById('main1');  
var myChart = echarts.init(chartDom);  
var option;  option = {legend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50,250],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},selectedMode:'single',selectedOffset:100,data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]};  myChart.setOption(option);   
</script>  
</body>  
</html>

相关文章:

数据可视化高级技术(Echarts)

目录 &#xff08;一&#xff09;数据可视化概念及Echarts基础知识 数据可视化的好处&#xff1a; 数据可视化的目标 数据可视化的基本流程 &#xff08;二&#xff09;数据图表 类别比较图表&#xff1a; 数据关系图表&#xff1a; 数据分布图表&#xff1a; 时间序列…...

设计模式——行为型——责任链模式Chain Of Responsibility

请求类 public class ApproverRequest {private int type;//请求批准的类型private float price;//请求的金额private int id;//请求的编号 } 审批人抽象类 public abstract class ApproverPerson {protected ApproverPerson next;protected String name;//审批过程public a…...

设计模式之工厂方法模式精讲

工厂方法模式又叫虚拟构造函数&#xff08;Virtual Constructor&#xff09;模式或者多态性工厂&#xff08;Polymorphic Factory&#xff09;模式。工厂方法模式的用意是定义一个创建产品对象的工厂接口&#xff0c;将实际创建性工作推迟到子类中。 工厂模式可以分为简单工厂…...

JS实现省市区三级联动(json假数据)

省市级三级联动通常指的是在用户界面上&#xff0c;用户可以通过选择省份&#xff0c;然后基于所选择的省份选择对应的城市&#xff0c;最后基于所选择的城市选择对应的区县。这种联动效果在很多应用中都有出现&#xff0c;例如电商平台的收货地址选择、政务服务的地区选择等。…...

Fastjson配置消息转换器(时间格式问题)

问题&#xff1a; 我们可以看见&#xff0c;日期的格式有点问题。 由于ArticleListVO类的createTime成员变量是Date类型&#xff0c;默认是由java的Jackson来处理&#xff0c;使用 ISO-8601 规范来处理日期时间格式。ISO-8601 是一种国际标准的日期时间表示法&#xff0c;例如&…...

安卓Android 架构模式及UI布局设计

文章目录 一、Android UI 简介1.1 在手机UI设计中&#xff0c;坚持的原则是什么1.2 安卓中的架构模式1.2.1 MVC (Model-View-Controller)设计模式优缺点 1.2.2 MVP(Model-View-Presenter)设计模式MVP与MVC关系&#xff1a; 1.2.3 MVVM(Model—View—ViewModel ) 设计模式1.2.4 …...

基于Spring Boot的在线学习系统的设计与实现

基于Spring Boot的在线学习系统的设计与实现 摘 要 在线学习系统是以大学传统线下教学方式不适应信息技术的迅速发展为背景&#xff0c;提高学习效率&#xff0c;解决传统教学问题&#xff0c;并且高效的实现教学信息化的一款软件系统。为了更好的实现对于教学和学生的管理&a…...

C++中重载和重写的区别

重载 是指同一可访问区内被声明的几个具有不同参数列&#xff08;参数的类型&#xff0c;个数&#xff0c;顺序不同&#xff09;的同名函数&#xff0c;根据参数列表确定调用哪个函数&#xff0c;重载不关心函数返回类型。 #include<bits/stdc.h>using namespace std;cl…...

二叉树 - 栈 - 计数 - leetcode 331. 验证二叉树的前序序列化 | 中等难度

题目 - 点击直达 leetcode 331. 验证二叉树的前序序列化 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理方法1&#xff1a;栈方法2&#xff1a;计数 3. 时间复杂度 3. 代码实现方法1&#xff1a;栈方法2&#xff1a;计数 leetcode 331. 验证二…...

Training language models to follow instructions with human feedback

Abstract 使语言模型变得更大并不意味着它们本身就能更好地遵循用户的意图。模型的输出结果可能存在以下问题 不真实有毒对用户没有帮助即这些模型没有和用户 “对齐”(aligned) 在给定的 Prompt 分布上,1.3B 的 InstructGPT 的输出比 175B GPT-3 的输出更好(尽管参数量相…...

Netty核心原理剖析与RPC实践11-15

Netty核心原理剖析与RPC实践11-15 11 另起炉灶&#xff1a;Netty 数据传输载体 ByteBuf 详解 在学习编解码章节的过程中&#xff0c;我们看到 Netty 大量使用了自己实现的 ByteBuf 工具类&#xff0c;ByteBuf 是 Netty 的数据容器&#xff0c;所有网络通信中字节流的传输都是…...

3.5网安学习第三阶段第五周回顾(个人学习记录使用)

本周重点 ①SSRF服务器端请求伪造 ②序列化和反序列化 ③Vaudit代码审计 本周主要内容 ①SSRF服务器端请求伪造 一、概述 SSRF: server site request forgery (服务器端请求伪造)。 SSR: 服务端请求&#xff0c;A服务器通过函数向B服务器发送请求。 SSRF发生的前提条件…...

kali常用命令功能简介记录

Kali Linux中常用的命令&#xff1a; 1. apt-get update&#xff1a;更新软件源列表。 2. apt-get upgrade&#xff1a;升级系统中已安装的软件包。 3. apt-get install [软件包]&#xff1a;安装指定的软件包。 4. apt-get remove [软件包]&#xff1a;卸载指定的软件包。 5.…...

低噪声、轨至轨运算放大器芯片—— D721、D722、D724,适合用于音频领域

应用领域 D721、D722、D724是我们推荐的三款低噪声、轨至轨运算放大器芯片&#xff0c;其中D721为单运放&#xff0c;D722为双运放&#xff0c;D724为四运放。适合用于音频领域、传感器等的信号放大处理&#xff0c;比如K歌宝、音响、测距、滤波器、AD转换器前级信号处理等等。…...

【统计】什么事 R 方

将线性模型拟合到时间序列时&#xff0c;通常使用最小二乘法在模型 y ^ ( t ) a b t \hat{y}(t) a bt y^​(t)abt中找到系数 a a a和 b b b&#xff0c;其中 y ^ ( t ) \hat{y}(t) y^​(t)是时间 t t t的预测值&#xff0c;而的观测值是 y ( t ) y(t) y(t)。 残差平方和又…...

Maplesoft Maple 2024(数学科学计算)mac/win

Maplesoft Maple是一款强大的数学计算软件&#xff0c;提供了丰富的功能和工具&#xff0c;用于数学建模、符号计算、数据可视化等领域的数学分析和解决方案。 Mac版软件下载&#xff1a;Maplesoft Maple 2024 for mac激活版 WIn版软件下载&#xff1a;Maplesoft Maple 2024特别…...

实战 | YOLOv8自定义数据集训练实现手势识别 (标注+训练+预测 保姆级教程--含数据集)

导 读 本文将手把手教你用YoloV8训练自己的数据集并实现手势识别。 安装环境 【1】安装torch, torchvision对应版本,这里先下载好,直接安装 pip install torch-1.13.1+cu116-cp38-cp38-win_amd64.whlpip install torchvision-0.14.1+cu116-cp38-cp38-win_amd64.whl 安装好…...

从零学算法2810

2810.你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 ‘i’ 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以正常工作。 给你一个下标从 0 开始的字符串 s &#xff0c;请你用故障键盘依次输入每个字符。 返回最终笔记本屏幕上输出的字符串。 示例 1&am…...

Vue——案例01(查询用户)

目录 一、案例实现页面 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路 四、完整代码 一、案例实现页面 实现用户对年龄的升降的排序、根据名字搜索用户信息以及重新返回原序列 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄…...

【数据结构】线性表

文章目录 前言线性表的定义和基本操作1.线性表的定义2.线性表的基本操作 顺序表的定义1.静态分配方式2.动态分配方式 顺序表的插入和删除1.顺序表的插入2.顺序表的删除 顺序表的查找1.按位查找&#xff08;简单&#xff09;2.按值查找 单链表的定义1.代码定义一个单链表2.不带头…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...