update 1. 大屏设计参考手册/前端er必须掌握的数据可视化技术.md.

1. 大屏设计参考手册/前端er必须掌握的数据可视化技术.md

@@ -3,14 +3,15 @@
 作为一名合格的社会人，我们每天都在工作、生活、学习中和数字打交道。小到量化的工作内容，大到具体的工作指标，车间生产、批发零售各行各业都充斥着大量数据。在互联网诞生之后，网络把我们紧紧相连，也让数据更为密集地汇聚。
  扯远了……当前，正在写月报的葡萄面对的是，后端发来铺天盖地的两万条数据。
 
-![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110352397-1732633938.png)
+![image-20211224235436087](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235436087.png)
 
 这个数据能用吗？
  能用，但不是完全能用。
  毕竟做报告的时候，我们不能把两万条数据直接甩到领导的脸上，让他自己想办法看看。
  这时万一领导说，看看哪个省销量最多，我们岂不是就当场就抓瞎了。
  但是如果变成这样一张图：
- ![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110412642-2145739196.png)
+
+![image-20211224235447384](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235447384.png)
 
 就可以清晰明了地看出各个省份之间的销量差距了。
  拿着这张图，我们就可以秒回领导：浙江省、天津市、江西省位居销量前三。
@@ -24,7 +25,6 @@
 ### 1、SVG
 
 SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。
- ![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110452124-835364067.png)
 
 以下是MDN上的一个例子：
 
@@ -37,7 +37,6 @@ SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。SVG可以
 ### 2、Canvas
 
 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等领域。
- ![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110602392-936655653.png)
 
 Canvas绘制的图形不会出现在DOM结构中，一般小画布、大数据量的场景适合用Canvas，性能更好。
  以下是一个简单例子：
@@ -58,7 +57,6 @@ const canvas = document.getElementById('canvas'); const ctx = canvas.getContext(
 ### 3、WebGL
 
 WebGL 使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的  API 在 canvas  中进行2D和3D渲染。如果您有一些3D绘制的需求，可以采用webGL方案。尤其是3d地图、3d地球等绘制都需要用到webGL技术。
- ![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110806365-874094557.png)
  webGL是基于Canvas的绘图技术。要使用webGL进行3D渲染，首先得在页面中创建一个canvas元素，通过这个canvas元素来初始化WebGL上下文。其中细节大家可以移步文档使用学习：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial
 
 ## 二、可视化组件和工具
@@ -88,13 +86,13 @@ option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
 
 除了Echarts官方提供的资源外，Echarts的资源社区Gallery才是真正的主力军。这个社区上有非常丰富的图表资源，都是用户个人上传的，还可以进行筛选查询，这些图表基本上可以满足绝大多数应用场景。
 
-![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222110954910-1893084390.png)
+![image-20211224235519662](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235519662.png)
 
 ### 3、AntV
 
 AntV 是一个数据可视化项目，也是一个团队，即蚂蚁集团的数据可视化团队。AntV  目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化等多个领域，主要包含  G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。
 
-![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222111014374-349190736.png)
+![image-20211224235530693](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235530693.png)
 
 其中G2主要致力于通用图表库，用更简化的语法构建出各种各样的可交互统计图表。F2是一个专注于移动、开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex等）。L7 是一个基于 WebGL  的开源大规模地理空间数据可视分析开发框架。关于AntV的各类图表使用，大家可以去官网自行查询：https://antv.vision/zh
 
@@ -102,7 +100,7 @@ AntV 是一个数据可视化项目，也是一个团队，即蚂蚁集团的数
 
 Wyn Enterprise 是一款强大的嵌入式数据可视化工具，提供了灵活的数据交互和探索分析能力，以及 OEM  白标集成的方式，全面满足行业应用软件的数据分析需求。它具备多源数据整合、报表设计、数据可视化、自助式BI分析、以及数据填报等功能，帮助用户挖掘数据的潜在价值，为管理者制定决策提供数据支撑。
 
-![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222111036005-788468830.png)
+![image-20211224235541605](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235541605.png)
 
 https://www.grapecity.com.cn/solutions/wyn
 
@@ -120,7 +118,7 @@ d3.select('#chart') .selectAll("div") .data([4, 16, 23, 42]) .enter() .append("d
 
 使用Vega不需要写前端代码，它做到了只需要 JSON  就能完成所有图表相关的开发，包括数据的加载、转换、交互等。由于Vega致力于通过一些JSON配置项实现图表的绘制，导致在生成一些基础简单的图表时，也需要很多行的配置。比如最简单的柱状图就需要95行配置，所以它提供了更简明的语法Vega-Lite，用于快速生成可视化以支持分析。以下是一个柱状图的示例：
 
-![img](https://img2020.cnblogs.com/blog/139239/202112/139239-20211222111131987-1404067282.png)
+![image-20211224235550623](https://gitee.com/er-huomeng/img/raw/master/img/image-20211224235550623.png)
 
 这里给大家贴出vega-lite的官网供大家学习：https://vega.github.io/vega-lite/