1.课程目标
数据可视化概念以及Echarts的基本用法
2.数据可视化概述
数据可视化主要指借助于图形化手段 清晰有效的传达与沟通信息
3.什么是数据可视化？
数据可视化 是指将大型数据集中数据以图形图像形式表示 并利用数据分析和开发工具发现其中未知的信息处理过程。 数据可视化是指将数据以视觉的形式来呈现，如图表或地图，以帮助人们了解这些数据的意义。通过观察数字、统计数据的转换以获得清晰的结论并不是一件容易的事。而人类大脑对视觉信息的处理优于对文本的处理——因此使用图表、图形和设计元素，数据可视化可以帮你更容易的解释数据模式、趋势、统计数据和数据相关性，而这些内容在其他呈现方式下可能难以被发现。
通俗的来讲就是让数据更直观的展示在页面上
4.经典可视化的案例
数据可视化商业案例集萃：www.storagelab.org.cn/zhangdi/201…
五个历史上最有影响力的数据可视化信息图:www.ctocio.com/ccnews/1622…
5.⼤数据可视化的价值
1.全方位数据解读数据可视化的过程中，企业可以根据数据的特点，360°全方位的将数据指标和维度进行组合，展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险，将成功的经验引入分享并总结。
2.企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点，从仅有的数据中挖掘出潜在的商机，快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。
3.为企业的每个工作人员提供辅助支持酷屏既可以为实施人员提供面向数据仓库的数据分析和丰富的二次开发接口，还可以为业务人员提供几十种能直接拖拉拽操作生成的大屏模板，也能让研发人员自由灵活的实现个性化功能拓展，实现组件样式或功能不受限。
4.展现企业实力企业在进行对外合作的时候，如果能用大屏展现企业现状和优势，能让合作方对企业的软硬件实力认知有很大提升，从而推进合作进程。
5.节约时间以往在进行每月，年中和年底总结的时候，各部门人员总是要花好几倍的时间去整理海量数据，然后用Excel将数据的某一个维度指标进行展示。当然不是说这种方法不好，但总归是麻烦了一些，而且很难从各个角度去分析，这样的总结分析动辄就是五六十页PPT，实在不利于领导理解工作。
6.数据可视化⼯具、案例、书籍
工具: Echarts、Sigma.js、Many Eyes等
书籍：数据可视化之美、数据可视化设计、视不可挡
7. Echarts概述
ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
8. Echarts特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
9. 如何快速上⼿开发⼀个Echarts可视化图表
管你使用那种 js 语言，要想实现功能，最核心的就是 下面的三个步骤。引入 Echarts 之前，要引入 jquery 库 ———————————————— 版权声明：本文为CSDN博主「阿鑫sama」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/weixin_4619…
1 引入 ECharts
1.<!DOCTYPE html>
2.<html>
3.<head>
4. <meta charset="utf-8">
5. <!-- 引入 ECharts 文件 -->
6. <script src="echarts.min.js"></script>
7. </head>
8. </html>
2.准备容器
1. <body>
2. <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
3. <div id="main" style="width: 600px;height:400px;"></div>
4. </body>
5. 复制代码
3.绘制图表 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>ECharts</title>
6. <!-- 引入 echarts.js -->
7. <script src="echarts.min.js"></script>
8. </head>
9. <body>
10. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
11. <div id="main" style="width: 600px;height:400px;"></div>
12. <script type="text/javascript">
13. // 基于准备好的dom，初始化echarts实例
14. var myChart = echarts.init(document.getElementById('main'));
15. // 指定图表的配置项和数据
16. var option = {
17. title: {
18. text: 'ECharts 入门示例'
19. },
20. tooltip: {},
21. legend: {
22. data:['销量']
23. },
24. xAxis: {
25. data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
26. },
27. yAxis: {},
28. series: [{
29. name: '销量',
30. type: 'bar',
31. data: [5, 20, 36, 10, 10, 20]
32. }]
33. };
34. // 使用刚指定的配置项和数据显示图表。
35. myChart.setOption(option);
36. </script>
37. </body>
38. </html>
————————————————
10. 如何阅读Echarts官⽅⽂档
进入echarts官网后 上面有个实例 进入官方实例
然后全局引入 之后就可以去找自己所需要的的条形图之类的实例了
11. Echarts学习必备基础知识
一、接口 echarts(enterprise charts 图标库) 二、图类 Bar：柱状图 line：折线图 Scatter：散点图 K：K线图 Pie：饼图 Radar：雷达图 Force：力导布局图 三、组件 Axis：坐标轴 Grid：网络 Polar：极坐标 Title：标题 Tooltip：提示 Legend：图例 data：值 四、基础库 zrender(canvas类库
12. 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中以前的用法也是兼容的，只是不推荐。 ————————————————
