大数据可视化技术：可视化技术概述与Echarts入门
1. 数据可视化的概念
使用计算机创建图形图表，可视化提取出来的数据，将数据的各种属性和变量呈现出来。我们熟悉的那些饼图、直方图、散点图、柱状图等，是最原始的统计图表，它们是数据可视化的最基础和常见应用。
2. 什么是数据可视化？
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。
3. 经典可视化案例
数据可视化的16个经典案例 源自简书
4. 大数据可视化的价值
1、全方位数据解读数据可视化的过程中，企业可以根据数据的特点，360°全方位的将数据指标和维度进行组合，展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险，将成功的经验引入分享并总结。
2、企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点，从仅有的数据中挖掘出潜在的商机，快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。
3、展现企业实力，企业在进行对外合作的时候，如果能用大屏展现企业现状和优势，能让合作方对企业的软硬件实力认知有很大提升，从而推进合作进程。
4、节约时间，以往在进行每月，年中和年底总结的时候，各部门人员总是要花好几倍的时间去整理海量数据，然后用Excel将数据的某一个维度指标进行展示。而使用数据可视化可更方便快捷。
5. 数据可视化⼯具、书籍
工具: Echarts、Sigma.js、Many Eyes等
书籍:数据可视化之美、鲜活的数据、数据可视化的基本原理与方法等
6. Echarts概述
ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
7. Echarts特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
8. 如何快速上手开发⼀个Echarts可视化图表
通过标签方式直接引入构建好的 echarts 文件
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
1
2
3
4
5
准备一个具备高宽的 DOM 容器。
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
1
2
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<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]
}]
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
9. 如何阅读Echarts官方文档
Echarts官方文档 API
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的区别
echarts是百度推出的一个简单实用的图表控件，就个人看来，echarts2的大部分图表代码的可用性和美观性更好，相对而言，echarts3也有很多改进的地方，例如模块导入等和图标选项优化等，本人近期主要在用echarts做地图开发，就一些个人心得总结如下：
1、js文件：
首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
2、文件导入：
在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
<script src="js/echarts.js"></script>
1
接下去只要调用接口就可以了。
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平级。
12. Echarts基础架构与常见名词术语
13. Echarts标准开发模板
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qiqiyiyi_/article/details/106393316
文章
4.77W+人气
12粉丝
1关注
更多数字孪生可视化干货内容
扫一扫关注公众号
扫一扫联系客服
©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 
浙公网安备33011002011932号
互联网信息服务业务 合字B2-20220090
