简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。
1. 课程⽬标
1.了解大数据可视化技术
1）什么是大数据可视化
2）数据可视化的应用场景与使用工具
3）数据可视化图标分析之10种场景
2.掌握Echarts核心组件
1）学会阅读Echarts官方文档搭建开发环境
2）掌握Echarts核心组件的适用于配置
3）掌握Echarts常用图的制作与注意事项
3.掌握Echarts高级用法
1）了解Echarts高级组件及使用技巧
2）Echarts图标混搭
3）了解异步数据加载
4）了解自定义主题
5）了解事件与行为
4.了解前后端数据展示
1）了解前后端数据交互的流程及管件步骤
2）通过综合项目案例熟练应用Echarts图表进行数据展示
复制代码2. 数据可视化概述
数据可视化就是借用于图形化手段，清晰有效地传达与沟通信息。以视觉的方式展示数据。
3. 什么是数据可视化？
信息可视化：将数据信息和知识转化为一种视觉形式，充分利用人们对可视模式快速识别的自然之力。
科学可视化：主要关注的是三维现象的可视化，如气象学，生物学，重点在于对体，面以及光源等等的渲染。
可视化分析：是信息可视化与科学可视化灵域发展的产物。侧重于借助于交互式用户界面进行分析推理。
4. 经典可视化案例
1).人类历史上最具有印象力的五个数据可视化信息图 www.ctocio.com/ccnews/1622…
2).数据可视化商业案例集 www.storagelab.org.cn/zhangdi/201…
5. ⼤数据可视化的价值
大数据可视化主要是通过各类统计图、地图和动态效果来生动地展示数据中各类变化，这种形式可以清晰直观的将关键数据传达给业务人员和决策人员。
数据可视化是将数据用图形化的方式来表示，数据可视化也是传达发现的有效方式，利用人类视觉的快速感知直觉，支持更轻松的协作和更快的创新。
1、更快地带来见解
数据可视化可以轻松发现趋势并更快地识别异常值。这些信息有助于了解业务的表现以及正在发展的机遇和风险。使每个人都能够快速，轻松地将数据转换为洞察力。
2、做出更明智，更快速的决策
通过理解信息并与他人合作以更快地激发洞察力和发现数据模式，组织可以快速做出基于数据数据驱动的决策。告别那种依靠直觉做出无把握决策的日子。
3、通过高级分析为每个人提供支持
现在，您的组织可以从易于使用的交互式仪表板中受益，该仪表板具有内置的地理空间，联动和钻取分析，可以开发更深入的见解，发现隐藏的模式，并对高价值的商业机会采取行动。
4、提高产品或服务的价值
数据具有令人难以置信的价值，但大多数用户没有时间或耐心去学习专业的商业智能工具。通过在你的应用和业务流程中嵌入DataFocus便捷的自助式分析能力，为用户提供方便，直观的数据。
5、在自定义分析请求上花费的时间更少
保护您的技术团队不为每个报告或可视化编写自定义代码，也不需要重复的，耗时的任务。相反，允许他们专注于构建您的核心产品或服务，使最终用户能够通过DataFocus的问答式搜索，自己可视化并从数据中获取答案。
6. 数据可视化⼯具、案例、书籍
数据可视化工具
数据可视化案例
数据可视化书记
7. Echarts概述
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
8.⼤数据可视化技术：可视化技术概述与Echarts⼊⻔
Echarts特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
复制代码9.如何快速上⼿开发⼀个Echarts可视化图表
获取 ECharts
你可以通过以下几种方式获取 ECharts
1. 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
2. 在 ECharts 的 GitHub 获取。
3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
4. 通过 jsDelivr 等 CDN 引入
复制代码引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
复制代码绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
复制代码然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<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]
}]
};
</body>
</html>
复制代码10.如何阅读Echarts官⽅⽂档
在官方文档：echarts.baidu.com/echarts2/do…
简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
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的区别
echarts是百度推出的一个简单实用的图表控件，就个人看来，echarts2的大部分图表代码的可用性和美观性更好，相对而言，echarts3也有很多改进的地方，例如模块导入等和图标选项优化等，本人近期主要在用echarts做地图开发，就一些个人心得总结如下：
1、js文件： 首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
2、文件导入： 在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
> <script src="js/echarts.js"></script>
复制代码接下去只要调用接口就可以了。 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中以前的用法也是兼容的，只是不推荐。
13.Echarts基础架构与常⻅名词术语
一 基本名词
14.Echarts标准开发模板
> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts图表</title>
<script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
</body>
</html>
<script>
var myChart=echarts.init(document.getElementById('main'))
var option={
legend:{
padding:10,
itemGap:10,//图例间隔
data:['邓艳波','杨国娥']//legend的data值要和series的对象的每个name 值相对应，不然不出来lenend
},
tooltip:{//悬浮的时候提示框
trigger:'item'//触发方式
},
xAxis:{
type:'category',//什么类型的，比如数值？
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value',
boundaryGap:[0.1,0.1],//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
splitNumber:4,//数值的分割段数，不指定的时候根据最大值最小值进行划分
},
series:[
{
name:'邓艳波',//系列名如启用legend，该值将被legend.data索引相关
type:'line',//折线图
data:[112,23,45,56,233,343,454,89,343,123,45,76]
},
{
name:'杨国娥',//系列名
type:'line',//折线图
data:[54,543,23,322,33,63,111,222,23]
}
]
}
myChart.setOption(option)
复制代码柱状图图解分析
实现
根据需要的各种图形可去寻找官网中的配置项手册对应的属性，然后实现你需要的效果
复制代码代码实现：
1.html样式
<body style="background-color:#333;">
<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
</div>
</body>
复制代码2.script 结构
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('_top'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
text: '主标题',
textStyle:{ //---主标题内容样式
color:'#fff'
},
subtext:'副标题', //---副标题内容样式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top:'1%', //----图例相对容器位置,top\bottom\left\right
selected:{
'销量':true, //----图例选择,图形加载出来会显示选择的图例，默认为true
},
textStyle:{ //----图例内容样式
color:'#fff', //---所有图例的字体颜色
//backgroundColor:'black', //---所有图例的字体背景色
},
tooltip:{ //图例提示框，默认不显示
show:true,
color:'red',
},
data:[ //----图例内容
{
name:'销量',
icon:'circle', //----图例的外框样式
textStyle:{
color:'#fff', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否显示提示框,默认为true
trigger:'item', //---数据项图形触发
axisPointer:{ //---指示样式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框内容样式
color:"#fff",
},
},
//------------- grid区域 ----------------
grid:{
show:false, //---是否显示直角坐标系网格
top:80, //---相对位置，top\bottom\left\right
containLabel:false, //---grid 区域是否包含坐标轴的刻度标签
tooltip:{ //---鼠标焦点放在图形上，产生的提示框
show:true,
trigger:'item', //---触发类型
textStyle:{
color:'#666',
},
}
},
//------------- x轴 -------------------
xAxis: {
show:true, //---是否显示
position:'bottom', //---x轴位置
offset:0, //---x轴相对于默认位置的偏移
type:'category', //---轴类型，默认'category'
name:'月份', //---轴名称
nameLocation:'end', //---轴名称相对位置
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
},
//---------------------- y轴 ------------------------
yAxis: {
show:true, //---是否显示
position:'left', //---y轴位置
offset:0, //---y轴相对于默认位置的偏移
type:'value', //---轴类型，默认'category'
name:'销量', //---轴名称
nameLocation:'end', //---轴名称相对位置value
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---类型
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
}
},
//------------ 内容数据 -----------------
series: [
{
name: '销量', //---系列名称
type: 'bar', //---类型
legendHoverLink:true, //---是否启用图例 hover 时的联动高亮
label:{ //---图形上的文本标签
show:false,
position:'insideTop', //---相对位置
rotate:0, //---旋转角度
color:'#eee',
},
itemStyle:{ //---图形形状
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20', //---柱形宽度
barCategoryGap:'20%', //---柱形间距
data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
复制代码16、授人以渔01_Echarts配置项查看技巧
17.Echarts拆线图详解，基本配置
1.折线图图解
html文件样式
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--第一步： 引入 ECharts 文件 -->
<script src="js/node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!--第二步：指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 -->
<div id="box" style="width: 600px;height:400px;"></div>
</body>
</html>
复制代码script 样式
<script>
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的内容基本涵盖你要画的图表的所有内容
var option = {
// 定义样式和数据
}
// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>作者：Duanjianwei
链接：https://juejin.cn/post/6844904170315595790
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
