从0到1构建大前端应用（番外篇三）：Echarts图表

小咪咪 2023-06-24 08:23 23阅读 0赞

先给大家介绍一下我们今天要讲的南丁格尔玫瑰图，南丁格尔玫瑰图，是由南丁格尔发明的，她是英国护士和统计学家。其在英国军营工作时收集了在克里米亚战争时期的士兵在不同月份的死亡率和原因分布，通过玫瑰图的方式有效的打动了当时的高层管理人员，于是医疗改良的提案才受到了大力的支持，将士兵的死亡率从42%降低至2%，因此后来将此图形称为南丁格尔玫瑰图。

那南丁格尔玫瑰图一般用在什么场景呢？其实南丁格尔玫瑰图和饼图类似，算是饼图的一种变形，用法也一样，主要用在需要查看占比的场景中。两者唯一的区别是：饼图是通过角度判别占比大小，而玫瑰图可以通过半径大小或者扇形面积大小来判别。  
我只是尽我所能为你呈现数据真实的一面。

*  提供了一些直观，易用的交互方式以方便你对所展现数据进行挖掘，提取，修正，整合（拖拽重计算，数据视图）。
 *  让你可以更加专注你所关心的地方，无论是系列选择，区域缩放，还是数值筛选（图例开关、数据区域缩放、值域漫游）。
 *  让你有不同的方式解读同样的数据（动态类型切换，多维度堆积，多图联动，混搭）  
    重新定义数据图表的时候到了，浏览Echarts所输出的图表，你不再只是个读者，你可以参与其中，这就是echarts，正在打造一个拥有互动图形用户界面（GUI）的数据可视化工具。

### 文章目录 ###

*  拖拽重计算
 *   *  整合你关心的数据。
     *  剔除畸形数据
     *  数据视图
     *  动态类型切换
     *  值域漫游
     *  数据区域缩放
     *  多图联动
     *  百搭时间轴
     *  大规模散点图
     *  多维度堆积
     *  商业BI
     *  混搭
     *  特效

前言  
技能要求：JavaScript(70)、HTML(20)、CSS(10%)  
深度数据互动可视化  
打破单纯的视觉呈现，拥有互动用户图形界面（GUI）的数据可视化，数据呈现不紧紧是诉说，而是允许用户对所呈现的数据进行挖掘、整合，让可视化成为辅助人们进行可视化思考的方式。

# 拖拽重计算 #

## 整合你关心的数据。 ##

图标数据的默认分类不总是满足每一个人的需求

## 剔除畸形数据 ##

不可避免，有些时候会有畸形数据存在

## 数据视图 ##

满足用户对数据的需求。  
如果你呈现的数据让用户足够关心，那么他们将不满足于查看可视化的图表：  
浪费服务器上宝贵的磁盘空间去异步生成数据文件？再大动干戈的开发文件下载的轮询请求

## 动态类型切换 ##

很多图表类型所表现的类型是相似的，但是由于数据差异，表现需求和个人喜好的不同所呈现的张力又不太一样。比如折线图和柱状图的选择总是让人头疼，是否使用堆积也是一个艰难的决定，是放弃这个尝试还是重复的写上大段代码。  
柱状图-折线图-堆积平铺状态

## 值域漫游 ##

聚焦到你所关心的数值上  
基于坐标的图表（如地图，散点图），通过色彩变化表现数值的大小能直观形象的展示数据分布，但是如何聚焦到我所关心的数值上，比如我只想查看top10的地域有哪些？  
和地图的双向联动

## 数据区域缩放 ##

聚焦到你所关心的数据上

显示空间总是有限的，显示一大段时间跨度的数据是常见的需求，

## 多图联动 ##

更友好的关联数据分析

## 百搭时间轴 ##

时空数据分析是信息可视化里一个相当重要的方向  
Echarts提供可以与任意图标搭配使用的时间轴控件，以展现时空数据变化。

时间轴-地图联动

## 大规模散点图 ##

展现成千上万的离散数据，从而找出他们的分布和聚类

## 多维度堆积 ##

多系列数据的堆积呈现比单一汇总更具有表现力，

## 商业BI ##

仪表盘最关键的用途是显示关键性能指标辅助于绩效管理，而漏斗图则在营销分析中广泛使用，既不失去美观，又保持数据的真实性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

## 混搭 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
图表支持任意混搭，配合事件响应甚至可以在图标内做出一个具有数据联动的交互系统，

## 特效 ##

吸引眼球的能力  
Echarts支持标注线的炫光特效，特别用在地图上实现百度迁徙数据的可视化特效。  
模拟迁徙。当你有大量标注数据，可以使用MarkPoint

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191222133732130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191222133843459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dWNoZW4uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70