超级干货:手把手教你如何实现数据可视化
目录:
- 一、引言
- 二、数据可视化
- 1、数据可视化是什么?
- 2、数据可视化的目的
- 3、使用场景
- 4、数据可视化工具
- 5、ECharts 可视化工具
- 1、什么是ECharts
- 2、如何使用
- (1)下载
- (2)引入ECharts
- (3)使用
- (4)案例
- 3、基础配置
- 4、ECharts社区
- (1)介绍
- (2)使用
一、引言
我们正处在一个数据横飞的大数据时代,对于我们来说数据是非常重要的,那么怎样把它的重要之处就展示出来是我们需要掌握的,这就是接下来本文要讲的重点数据可视化。
通过观察数字和统计数据的转换以获得清晰的结论并不是一件容易的事。必须用一个合乎逻辑的、易于理解的方式来呈现数据。
二、数据可视化
1、数据可视化是什么?
数据可视化,是指将相对晦涩的的数据通过可视的、交互的方式进行展示,从而形象、直观地表达数据蕴含的信息和规律。比如说图表、地图……等。
2、数据可视化的目的
数据可视化主要目的是借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理,从而让我们能够很清晰的知道我们想要的信息。
3、使用场景
目前互联网公司通常有这么几大类的可视化需求:
- 通用图表,比如后台系统,或者前台的个人数据统计……等
- 移动端图表,就比如csdn移动端的数据统计
- 大屏可视化,比如我们去医院,或者哪个公司的重要场合就需要大屏可视化
- 图编辑和图分析
- 地理可视化,比如地图,地势……等
4、数据可视化工具
要想实现数据可视化,则必须通过一定的手段、工具和技术来完成,那么以下是数据可视化常用的工具:
- D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
- ECharts.js 百度出品的一个开源 Javascript 数据可视化库
- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案
注意:Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
5、ECharts 可视化工具
1、什么是ECharts
ECharts,是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
人话:
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表(折线图、柱状图、散点图、饼图、K线图),且可定制。
ECharts官网:https://echarts.apache.org/zh/index.html
2、如何使用
步骤:
- 下载echarts
- 引入echarts
dist/echarts.min.js
- 准备一个具备大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据(option)
- 将配置项设置给echarts实例对象
(1)下载
- 进入ECharts官网,在导航栏下点击下载 =》下载
- 点击下载最新版的ECharts,找到后点击Dist
进入GitHub官网,点击Code
点击Code,选择Downliad ZIP压缩包离线下载
(2)引入ECharts
在下载的incubator-echarts目录下找到dist目录,并找到echarts.min.js或者echarts.js即可,并将它们方到你当前的项目工程中
在html中引入echarts
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script> </head> </html>
(3)使用
首先必须创建一个容器,并设置其大小,来装这个视图,可以使用DIV标签
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main"></div>
进入echarts官网,找到合适的图表,并复制代码到js脚本中
基于准备好的dom,初始化echarts实例
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));
使用指定的配置项和数据显示图标
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
(4)案例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
3、基础配置
需要了解的主要配置:series
xAxis
yAxis
grid
tooltip
title
legend
color
series
- 系列列表。每个系列通过
type
决定自己的图表类型 - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- 系列列表。每个系列通过
xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
yAxis:直角坐标系 grid 中的 y 轴
grid:直角坐标系内绘图网格。
title:标题组件
tooltip:提示框组件
legend:图例组件
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的
stack
值后 后一个系列的值会在前一个系列的值上相加。
4、ECharts社区
(1)介绍
ECharts社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。
在这里可以找到一些基于EChart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表,比如迁徙图……等一些内容丰富的图表
ECharts社区:https://gallery.echartsjs.com/explore.html#sort=ranktimeframe=allauthor=all
(2)使用
使用与ECharts的使用相同,但是最大的区别在于,有的图表需要额外导入一些比如像china.js这样的包,我们可以理解为第三方脚本。
注意:
- 在使用的时候一定要留意”脚本“
- 点击脚本后可显示使用的第三方脚本脚本
这样的脚本我们无需下载,因为在下载ECharts的时候已经顺带下载好了,在incubator-echarts目录下找到map目录,并进入js目录即可找到依赖脚本
将该脚本与ECharts脚本一天导入当前目录,并引入html
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script><script src="china.js"></script> </head> </html>
超级干货:手把手教你如何实现数据可视化相关推荐
- 超级干货 :一文读懂数据可视化
前言 数据可视化,是指将相对晦涩的的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律. 早期的数据可视化作为咨询机构.金融企业的专业工具,其应用领域较为单一,应用形态较为保 ...
- Nature综述:手把手教你分析菌群数据
本文转载自"热心肠先生",己获授权. 导读 自然微生物综述(2017 IF:31.851)于2018年5月23日在线发表了Rob Knight亲自撰写(一作兼通讯)的微生物组领域研 ...
- 手把手教你完成一个数据科学小项目(7):经纬度获取与BDP可视化
前言 请先阅读"中国年轻人正带领国家走向危机",这锅背是不背? 一文,以对"手把手教你完成一个数据科学小项目"系列有个全局性的了解. 本系列代码统一开源在Git ...
- 手把手教-网络时空大数据爬取与分析DAS系统(瓦片地图获取)
手把手教 | 网络时空大数据爬取与分析DAS系统(瓦片地图获取) 原创 DAS Team 双评价DAS 地理计算语言,为大众赋能地理智慧. --DAS Team 爬取分析DAS系统下载 地址: htt ...
- 手把手教你完成一个数据科学小项目(9):情感分析与词云
前言 请先阅读"中国年轻人正带领国家走向危机",这锅背是不背? 一文,以对"手把手教你完成一个数据科学小项目"系列有个全局性的了解. 本系列代码统一开源在Git ...
- ESP8266 Non-OS SDK 开发之旅 基础篇① 初识 Non-OS SDK,史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境,完成第一个例子Hello World!
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
- python数据分析图_Python数据分析:手把手教你用Pandas生成可视化图表的教程
大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后, ...
- [京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果
0 契机与背景 今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...
- Nature综述:Rob Knight手把手教你分析菌群数据(全文翻译1.8万字)
本文转载自"热心肠先生",己获授权. 导读 自然微生物综述(2017 IF:31.851)于2018年5月23日在线发表了Rob Knight亲自撰写(一作兼通讯)的微生物组领域研 ...
- Nature综述 | Rob Knight手把手教你分析菌群数据(全文翻译1.8万字)
本文转载自"热心肠先生",己获授权. 导读 自然微生物综述(2017 IF:31.851)于2018年5月23日在线发表了Rob Knight亲自撰写(一作兼通讯)的微生物组领域研 ...
最新文章
- 获取应用程序文件夹路径的最佳方法
- C语言 | C语言实现高精度加法——数组加法(附源代码)
- Qt Creator编码
- 为什么要要使用MyBatis
- java中想要保留2位小数_java使double保留两位小数的多方法 java保留两位小数
- 后端学习 - JVM(上)内存与垃圾回收
- Android性能优化之内存篇
- C# 实现程序最小化到托盘
- Windows程序设计_19_测试Windows应用程序加载函数
- creo不完全约束_Creo绘图1:1输出AutoCAD配置方法详解,工程图输出再不用担心尺寸乱变!...
- 在线Cron在线表达式生成器工具推荐【磁钉cron生成器】
- Vue组件间通信:父传子(props),子传父($emit)
- IDE、SCSI接口区别
- VideoCapture,mfc读取视频并使用滚动条
- spirng中bean对象的作用范围
- 基于 CentOS 搭建微信小程序服务
- python爬取校花网的图片
- 可执行文件信息查看工具代码示例
- window 错误代码
- 【转】手把手走入Git开源世界
热门文章
- SAP系统开发里程碑 2022 刘欣
- 分期付款“名义利率”和“实际利率”的公式及其套路
- 数据挖掘基础之数据库
- 某汽车零部件制造厂商
- 在Arduino和ESP32-s2环境下,测试WiFi Fine Time Measurement (FTM) Round Trip Time (RTT) 的定位和测距
- 微信小程序名片版需要服务器吗,【微信小程序】壹脉智能名片小程序源码V3.5.0+前端+后端+无插件【包更新】...
- GAMS系列分享13——综合能源系统——包含储能的单能源枢纽模型
- luogu P2440 木材加工
- std::ios_base::fmtflags orig std::streamsize prec
- Windbg的获取与安装教程