markdown
一、markdown是什么
markdown 写作的轻量级【标记语言】
二、markdown用法
1.换行和空格
(1)换行
行尾加两个空格
(2)空格
2. 标题
一个#为一级标题,两个#为二级标题，依次类推
王
王
王
王
王
王
3. 字体
斜体
一对星号为斜体**
写出来的效果：王
加粗
两对星号为加粗----------****
写出来的效果：王
斜体加粗
三队星号为斜体加粗-------******
写出来的效果：王
删除线
两对波浪号为删除线-------~~~~
写出来的效果: 王
4. 分割线
三个或者三个以上的 - 或者 * 都可以。
5. 图片
6. 超链接
[名称](跳转的连接，比如百度的)
7.引用
用>来写引用
引用的内容
引用的内容1
引用的内容2
8.代码
单行代码：代码之间分别用一个反引号包起来----- `
代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行---```
示范:
单行代码
代码块
9.表格
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容
第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右
注：原生的语法两边都要用 | 包起来。此处省略
| 表头 | 表头 | 表头 |
|---|---|---|
| 内容 | 内容 | 内容 |
| 内容 | 内容 | 内容 |
Echarts
1.什么是数据可视化
一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。借助于图形化手段，清晰有效地传达与沟通信息
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭
2.数据可视化可以分为哪几种
- 科学可视化
- 信息可视化
- 可视化分析
干净的数据源
数据接入--->数据整合--->数据处理--->得到数据
需要把数据分析的结果通过可视化展现出来，让用户简单的了解到所有的内容
3.经典的可视化案例
4.大数据可视化的价值
- 数据可视化他能够快速的发现我们数据改变的趋势，能够去预测未来，降低决策的风险
- 能够设置精准广告的投放
- 能让我们的信息更快人一步
5.数据可视化的工具
6.Echarts怎么用
-
四种方式获取 ECharts
-
从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
-
在 ECharts 的 GitHub 获取。
-
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
-
通过 jsDelivr 等 CDN 引入
-
-
引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
- 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!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>
效果图
上面代码中option中title、tooltip、legend、xAxis、yAxis、series的理解
- title：标题组件
- tooltip：提示框组件
- legend：图例组件
- xAxis：直角坐标系grid中的X轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
- yAxis：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
- series：系列列表。每个系列通过 type 决定自己的图表类型
