Typora工具的使用
Typora 是什么？
-
Typora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，并且由于仍在测试中，是完全免费的。
-
一个文本编辑器，写得舒服是关键。我曾说过，「更有趣的是，一个笔记应用不会因为它支持 Markdown 语法而高级或易用很多。」，细枝末节处的人性化考虑才是最重要的。而 Typora 的编辑体验显然是经过深思熟虑设计的产物。
MarkDown
什么是MarkDown？
Markdown是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。
优点： 1、因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。 2、操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可
缺点： 1、需要记一些语法（当然，是很简单。五分钟学会）。 2、有些平台不支持Markdown编辑模式。
MarkDown语法
1.标题
在想要设置为标题的文字前面加#来表示 一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。
注：标准语法一般在#后跟个空格再写文字，貌似简书不加空格也行。
示例如下:
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题
2.字体
-
加粗
要加粗的文字左右分别用两个*号包起来
-
斜体
要倾斜的文字左右分别用一个*号包起来
-
斜体加粗
要倾斜和加粗的文字左右分别用三个*号包起来
-
删除线
要加删除线的文字左右分别用两个~~号包起来
示例如下:
**这是加粗的文字** *这是倾斜的文字*` ***这是斜体加粗的文字*** ~~这是加删除线的文字~~
3.引用
在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>> n个... 貌似可以一直加下去，但没神马卵用
示例如下:
>这是引用的内容 >>这是引用的内容 >>>>>>>>>>这是引用的内容
4.分割线
三个或者三个以上的 - 或者 * 都可以。
示例如下：
---
----
***
*****
5.图片
图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
示例如下：
6.超链接
[超链接名](超链接地址 "超链接title")
title可加可不加
示例如下：
[简书](http://jianshu.com)
[百度](http://baidu.com)
7.列表
无序列表
语法： 无序列表用 - + * 任何一种都可以有序列表
语法： 数字加点
echarts教程：
模块⼀、大数据可视化技术：可视化技术概述与Echarts入门
1. 数据可视化概述
-
狭义上的数字可视化指的是将数据用统计图表方式呈现，而信息图形（信息可视化）则是将非数字的信息进行可视化。前者用于传递信息，后者用于表现抽象或复杂的概念、技术和信息。
-
广义上数据可视化是信息可视化其中一类，因为信息是包含了：数字和非数字的。
-
从原词的解释来讲：数据可视化重点突出的是”可视化”,而信息可视化则重点是”图示化”。
-
整体而言：可视化就是数据、信息以及科学等等多个领域图示化技术的统称。
2.什么是数据可视化
数据可视化是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的理论、方法和技术。它涉及到计算机图形学、图像处理、计算机视觉、计算机辅助设计等多个领域，成为研究数据表示、数据处理、决策分析等一系列问题的综合技术。
3.经典可视化案例
4.大数据可视化的价值
1.全方位数据解读数据可视化的过程中，企业可以根据数据的特点，360°全方位的将数据指标和维度进行组合，展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险，将成功的经验引入分享并总结。
2.企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点，从仅有的数据中挖掘出潜在的商机，快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。
3.为企业的每个工作人员提供辅助支持酷屏既可以为实施人员提供面向数据仓库的数据分析和丰富的二次开发接口，还可以为业务人员提供几十种能直接拖拉拽操作生成的大屏模板，也能让研发人员自由灵活的实现个性化功能拓展，实现组件样式或功能不受限。
4.展现企业实力企业在进行对外合作的时候，如果能用大屏展现企业现状和优势，能让合作方对企业的软硬件实力认知有很大提升，从而推进合作进程。
5.节约时间以往在进行每月，年中和年底总结的时候，各部门人员总是要花好几倍的时间去整理海量数据，然后用Excel将数据的某一个维度指标进行展示。当然不是说这种方法不好，但总归是麻烦了一些，而且很难从各个角度去分析，这样的总结分析动辄就是五六十页PPT，实在不利于领导理解工作。
5.数据可视化⼯工具、案例例、书籍
纯可视化图表生成类——适合开发，工程师
Echart
一个纯Javascript的数据可视化库，百度的产品，常应用于软件产品开发或网页的统计图表模块。可在Web端高度定制可视化图表，图表种类多，动态可视化效，各类图表各类形式都完全开源免费。能处理大数据量和3D绘图也不逊色，据说结合百度地图的使用很出色。
AntV又是蚂蚁金服出品（阿里系）的一套数据可视化语法，貌似是国内第一个采用The grammar Of Graphics这套理论的可视化库。antv带有一系列的数据处理API，简单数据的数据归类，分析的能力，被很多大公司用作自己BI平台的底层工具。
Highcharts
说道Echarts，都会拿来与Hicharts对比，两者有点像WPS和OFFICE的关系，倒不是说Echarts怎样，日常图表动效Echarts完全够了。
Highcharts同样是可视化库，只不过是国外的，商用的话需要付费。其优势是文档详细, 实例也很很详细，文档中依赖哪些js脚本，css都十分详细，学习和开发都比较省时省力，相应的产品稳定性较强。
可视化报表类——适合报表开发、BI工程师
FineReport
一个报表软件，企业级的应用。用于系统的开发业务报表，数据分析报表。也可集成在OA，ERP，CRM等应用系统内，做数据报表模块，也可以开发成财务分析系统，就看你如何驾驭数据了。
两大核心功能是填报和数据展示，但我觉得比较惊艳的一点是，它内置了大量的图表和可视化动效，可视化很丰富，完全没有印象中做报表那种古板的风格。多以它能做出格式各样的dashboard、甚至是可视化大屏，一点不虚。
我之前工作有段时间拿finereport，感触最深的是开发报表很省力，10张门店报表以往做10张excel的，在他里面就是一个参数查询，然后批量导出，用一个模板。
商业智能分析——适合BI工程师、数据分析师
Tableau
几乎是数据分析师人人会提的工具，内置常用的分析图表，和一些数据分析模型，可以快速的探索式数据分析，制作数据分析报告。
因为是商业智能，解决的问题更偏向商业分析，用 Tableau可以快速地做出动态交互图，并且图表和配色也非常拿得出手。
自助是BI工具，也是一款成熟的数据分析产品。内置丰富图表，不需要代码调用，可直接拖拽生成。可用于业务数据的快速分析，制作dashboard，也可构建可视化大屏。
有别于Tableau的是，它更倾向于企业应用，从内置的ETL功能以及数据处理方式上看出，侧重业务数据的快速分析以及可视化展现。可与大数据平台，各类多维数据库结合，所以在企业级BI应用上广泛，个人使用免费。
软继Excel之后推出的BI产品，可以和Excel无缝连接使用，创建个性化的数据看板。
软继Excel之后推出的BI产品，可以和Excel无缝连接使用，创建个性化的数据看板。
阿里DataV
天猫双十一大屏就用DataV做的，是阿里云的拖拽式可视化工具，主要用于业务数据与地理信息融合的大数据可视化，像一些展览中心，企业管控中心用。
不需要编程，通过简单的拖拽配置就能生成可视化大屏或者仪表盘。
上面提过，这个工具它也能做可视化报表，也能做大屏。
因为后端通常连接业务系统数据，所以可以实时连接业务数据，做企业的一些经营数据展示。比如展览中心、BOSS驾驶舱，还有城市交通管控中心、交易大厅等。
典型如R和Python
R-ggplot2
6.Echarts概述
ECharts是一个免费的、功能强大的、可视化的一个库。它可以非常简单的往软件产品中添加直观的、动态的和高度可定制化的图表。它是一个全新的基于zrender的用纯JavaScript打造完成的canvas库.
7.Echarts特性介绍
特性一：它有非常丰富的图表类型
echarts不仅提供常见的如折线图，柱状图，`散点图，饼图，K线图等图表类型，而且ECharts 提供了用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
特性二：多个坐标系的支持
echarts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。
特性三：移动端的优化
流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构，带来了核心部分体积的减小。ECharts 组件众多，并且后面会持续增加，我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。
移动端交互也做了优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移。有很好的PC端和移动端的兼容性和适应性。
特性四：深度的交互式数据探索
交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。 echarts 提供了legend visualMap dataZoom tooltip等组件以及图表附带的漫游，选取等操作提供了数据筛取、视图缩放、展示细节等能力。echarts 3 中，对这些组件进行了广泛增强，支持在数据的各种坐标轴、维度进行数据过滤、缩放，以及在更多的图中采用这些组件。
特性五：大数据量的展现
现在的时代是大数据时代，越来越多的数据堆积，如何才能使这些数据发挥它应有的价值是一件值得我们深思的事情。echarts对大数据的处理能力非常好，借助 Canvas 的能力，ECharts 在散点图中能够轻松展现上万甚至上十万的数据。
特性六：多维数据的支持以及丰富的视觉编码手段
echarts 3 加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色，大小，透明度，明暗度等不同的视觉通道。
特性七：动态数据
echarts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，echarts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。
特性八：绚丽的特效
这个特性是从视觉效果上最吸引人的一个特性，echarts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效如模拟迁徙等特效。
8.如何快速上手开发一个Echarts可视化图表
9.如何阅读Echarts官方文档
10.Echarts学习必备基础知识
一、接口 echarts(enterprise charts 图标库) 二、图类 Bar：柱状图
line：折线图
Scatter：散点图
K：K线图
Pie：饼图
Radar：雷达图
Force：力导布局图
三、组件 Axis：坐标轴 Grid：网络 Polar：极坐标 Title：标题 Tooltip：提示 Legend：图例 data：值
四、基础库 zrender(canvas类库)
11.Echarts3.x与Echarts2.x的区别
1、js文件： 首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
2、文件导入： 在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
接下去只要调用接口就可以了。 3、离线地图： echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县与区县之间基本上不存在衔接问题。
另外，在echarts3中可以根据需要自主构建地图，这个服务给实际使用提供了很大的便利。
4、工具栏： 在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3里面的toolbox更丑了。
5、地图漫游工具： 在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着还是挺不错的，虽然并没有什么用。
6、坐标系: echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：
echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的。echarts3中，支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理坐标系（geo）。
7、Option变动： 1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。
12.Echarts基础架构与常见名词术语
基本名词:
chart 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 axis 直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型 xAxis 直角坐标系中的横轴，通常并默认为类目型 yAxis 直角坐标系中的纵轴，通常并默认为数值型 grid 直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局 legend 图例，表述数据和图形的关联 dataRange 值域选择，常用于展现地域数据时选择值域范围 dataZoom 数据区域缩放，常用于展现大量数据时选择可视范围 roamController 缩放漫游组件，搭配地图使用 toolbox 辅助工具箱，辅助功能，如添加标线，框选缩放等 tooltip 气泡提示框，常用于展现更详细的数据 timeline 时间轴，常用于展现同一系列数据在时间维度上的多份数据 series 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
图表名词:
line 折线图，堆积折线图，区域图，堆积区域图。 bar 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 scatter 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 k K线图，蜡烛图。常用于展现股票交易数据。 pie 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 radar 雷达图，填充雷达图。高维度数据展现的常用图表。 chord 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 force 力导布局图。常用于展现复杂关系网络聚类布局。 map 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 heatmap 热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。 gauge 仪表盘。用于展现关键指标数据，常见于BI类系统。 funnel 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。 evnetRiver 事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。 treemap 矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。 venn 韦恩图。用于展示集合以及它们的交集。 tree 树图。用于展示树形数据结构各节点的层级关系 wordCloud 词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容
13.Echarts标准开发模板
14.Echarts 柱状图（bar）详解
下面从实现一个柱形图来体验下Echarts这个工具：
效果图：
对柱形图各部分分析:（重点）
实现：
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性，然后实现你需要的效果**
下面从实现一个柱形图来体验下Echarts这个工具：
效果图：
对柱形图各部分分析:（重点）
实现：
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性，然后实现你需要的效果**
15.Echarts 配置项查看技巧
16.Echarts 拆线图（line）详解 基本配置 详解 动态数据展示
x轴属性：boundaryGap默认值为true，此时图表：
x轴属性：boundaryGap设置值为false，此时图表：
注意：区别是 折线起始拐点位置不同
提示框
设置：trigger: 'axis'
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axis是轴、轴线的意思，此刻提示框显示的是所有折线同一横坐标的拐点信息
设置：trigger: 'item'
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
用在有类目轴的折线图表中：鼠标放哪个拐点上，就只显示当前拐点的信息，设置symbol: 'none',的没有拐点，不显示提示框
17.定制输出数据视图（dataView）的内容
什么是dataView
DataView表示用于排序、筛选、搜索、编辑和导航的 DataTable 的可绑定数据的自定义视图。可以将DataView同数据库的视图类比，不过有点不同，数据库的视图可以跨表建立视图，DataView则只能对某一个DataTable建立视图。DataView一般通过DataTable.DefaultView 属性来建立，再通过RowFilter 属性和RowStateFilter 属性建立这个DataTable的一个子集。
18.利利⽤用百度图说实现Echarts的可视化配置
百度API调用及echart库引入
1. 百度API ak申请：
为引入百度地图，需要申请自己的密钥，该密钥作为后面的src引入。
2. 申请认证企业信息：
lbsyun.baidu.com/apiconsole/… ，配额增加申请。
当然，如果个人用户，没必要增加配额，一般不会超限制数。
- 下载相关javaScript库：
jquery.min.js，require.js，echarts.js，这里我都已下载好，JQ用的是jQuery v1.10.2，require用的是RequireJS 2.2.0，echart用的是echarts-2.2.7，引入如下：
其中第二个 script 标签里对应的需换成申请的ak，example2.js对应为echart效果。
4. 百度地图额外依赖库main.js
这里模块化的引入对应文件夹下echarts文件，main.js存放于下载的echarts源码中的extension\BMap\src路径下，同时需引入其他echarts2的图形控件，在build\dist\chart路径，在该路径下对应有：
需要时再引入即可，若无需其他可视化扩展，可删除除map.js外的其他js文件。
5. 为实例化百度地图背景构建一个容器：
Margin设为0则与浏览器无边界融合，div属性容器id，后面js脚本里需要用到该属性，并将echart填充到该容器里，当然，div可以有多个，故可以填充多个echart实例。实例化后再js脚本里调用echart api即可：
上图中的方法都封装在main.js中，使用的时候按上图调用即可，其中css样式对应之前的容器大小，BMapExt为初始化的地图对象，具体可看main.js源码，中间getMap,getEchartsContainer为获取地图实例及echart实例对象，BMap.Point是定义当前打开地图的中心点，最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。
6. 引入的文档结构：
