Vue3.0与Echarts5

1.课程介绍与目标

有句话说的好“一图胜千言”,在我们开发的领域就是说,在对于复杂难懂且体量庞大的数据展示上面而言,图表的信息量要大得多,这也是我们为什么要谈数据可视化。https://notes.xiyankt.com/#/echarts/echarts​

study-notes/echarts/echarts.md · James/技术笔记 - Gitee.com

2.数据可视化介绍

数据可视化这一概念自 1987 年正式提出,经过 30 余年的发展,逐渐形成 3 个分支:科学计算可视化(scientific visualization) 、信息可视化(information visualization)和可视分析(visual analytics)。近些年来,这 3 个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。

什么是数据可视化?

顾名思义,数据可视化就是将数据转换成图或表等,以一种更直观的方式展现和呈现数据。通过“可视化”的方式,我们看不懂的数据通过图形化的手段进行有效地表达, 准确高效、简洁全面地传递某种信息,甚至我们帮助发现某种规律和特征,挖掘数据背后的价值。同时关于数据可视化的定义有很多,像百度百科的定义是:数据可视化,是关于数据视觉表现形式的科学技术研究。 其中,这种数据的视觉表现形式被定义为一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。 这种定义可能显得比较晦涩难懂。在大数据分析工具和软件中提到的数据可视化,就是利用运用计算机图形学、图像、人机交互等技术,将采集或模拟的数据映射为可识别的图形、图像。

数据可视化的展现形式

数据可视化有众多展现方式,不同的数据类型要选择适合的展现方法。在数据可视化中除了常用的的柱状图、线状图、条形图、面积图、饼图、点图、仪表盘、 走势图外,还有和弦图、圈饼图、金字塔、漏斗图、K线图、关系图、网络图、玫瑰图、帕累托图、数学公式图、预测曲线图、正态分布图、迷你图、行政地图、 GIS地图等各种展现形式。都可以为我们提供丰富的图表选择,让我们在实际使用过程中有更好的展现方式。

我们可以通过类柱状图

比较类图表显示值与值之间的不同和相似之处。 使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小, 通常用于展示不同分类间的数值对比,不同时间点的数据对比。

柱形图有别于直方图,柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据,回答的是每一个分类中"有多少?"这个问题。 需要注意的是,当柱状图显示的分类很多时会导致分类名重叠等显示问题。

同时可以通过占比类图表显示同一维度上的占比关系。饼图广泛应用在各个领域,用于表示不同分类的占比情况,通过弧度大小来对比各个分类。

饼图通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该分类占总体的比例大小,所有区块(圆弧)的加和等于 100%。

也可以趋势类折线图

趋势类图表显示数据的变化趋势。 使用图形的位置表现数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

当然,大数据可视化的图表远远不止以上几种,最关键的是如何利用好这些工具及图表,归纳起来,一名数据可视化工程师需要具备三个方面的能力,数据分析能力、交互视觉能力、研发能力。

数据可视化有什么用?

数据可视化的意义是帮助人更好的分析数据,信息的质量很大程度上依赖于其表达方式。对数字罗列所组成的数据中所包含的意义进行分析, 使分析结果可视化。其实数据可视化的本质就是视觉对话。数据可视化将技术与艺术完美结合,借助图形化的手段,清晰有效地传达与沟通信息。 一方面,数据赋予可视化以价值;另一方面,可视化增加数据的灵性,两者相辅相成,帮助企业从信息中提取知识、从知识中收获价值。 精心设计的图形不仅可以提供信息,还可以通过强大的呈现方式增强信息的影响力,吸引人们的注意力并使其保持兴趣,这是表格或电子表格无法做到的。

3.Echarts--商业级数据图表介绍

1.什么是Echarts

Echarts--商业级数据图表,它是一个纯JavaScript的图标库,可以流畅的运行在PC和移动设备上, 兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等,底层依赖轻量级的Canvas类库ZRender, 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

2. Echarts特点
  • 1 、丰富的可视化类型 : 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
  • 2 、多种数据格式无需转换直接使用 : 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。
  • 3 、 千万数据的前端展现 : 通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。
  • 4 、 移动端优化 : 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。
  • 5 、 多渲染方案,跨平台使用 : 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。
  • 6 、 深度的交互式数据探索 : 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
  • 7 、 多维数据的支持以及丰富的视觉编码手段 : 对于传统的散点图等,传入的数据也可以是多个维度的。
  • 8 、 动态数据 : 数据的改变驱动图表展现的改变。
  • 9 、 绚丽的特效 : 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。

5.HelloWord 初体验

1.echarts获取

电脑上面安装node下载地址:http://nodejs.cn/

淘宝镜像(选按)

淘宝 NPM 镜像站自 2014 年 正式对外服务。于npm命令在国内下载速度很慢。所以淘宝每隔 10 分钟就会把npm服务器的内容拉取一次放在国内服务器 这样一来我们在下载依赖的时候 速度会快很多

npm install - g cnpm - -registry=https://registry.npm.taobao.org
安装
  • 1.初始化 npm init -y
  • 2.安装echarts依赖
npm install --save echarts
2.HelloWord

Vue3.0与Echarts5_第1张图片 




6. 配置项--title配置

title 标题组件,包含主标题和副标题



                    
                    

你可能感兴趣的:(信息可视化)