一直计划做一个可视化的大屏，然后今天花了一些时间做前期的准备工作，下面是准备过程中的一些总结，分享给大家伙，希望你们能够喜欢！
下面正式进入主题吧！web应用实战篇（echart）：一步步教你做可视化大屏（准备篇）
一、什么是ECharts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
（一）丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
（二）多种数据格式无需转换直接使用
ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。
（三）深度的交互式数据探索
交互是从数据中发掘信息的重要手段。“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。
ECharts 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
（四）多维数据的支持以及丰富的视觉编码手段
ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外，对于传统的散点图等，传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码，能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。
（五）动态数据
ECharts 由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需要获取数据，填入数据，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。
二、第一个完整的案例
（一）引入 ECharts
通过标签方式直接引入构建好的 echarts 文件，下载地址：https://www.echartsjs.com/zh/download.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
（二）绘制一个简单的DIV容器
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
（三）绘制一个简单的echarts实例
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="{{ url_for('static',filename='echarts.min.js') }}"></script>
</head>
<body>
<h1>hello echarts</h1>
<!-- 为 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],
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
（四）运行效果
三、基本概念
（一）echarts 实例
一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。
（二）系列（series）
系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、…
（三）组件（component）
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、…
其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
（四）用 option 描述图表
上面已经出现了 option 这个概念。echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
// option 每个属性是一类组件。
legend: {...},
grid: {...},
tooltip: {...},
toolbox: {...},
dataZoom: {...},
visualMap: {...},
// 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
xAxis: [
// 数组每项表示一个组件实例，用 type 描述“子类型”。
{type: 'category', ...},
{type: 'category', ...},
{type: 'value', ...}
],
yAxis: [{...}, {...}],
// 这里有多个系列，也是构成一个数组。
series: [
// 每个系列，也有 type 描述“子类型”，即“图表类型”。
{type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
{type: 'line', data: [2231, 1234, 552, ... ]},
{type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);
（五）组件的定位
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
或者基于 echarts 容器高宽的百分比（例如 right: ‘20%’ 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。
我们可以注意到，left right width 是一组（横向）、top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了，width 会被自动算出。
（六）坐标系
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。
一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid自动引用并组织起来，共同工作。
四、一个优化的案例
ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现上述的优化：
（一）显示数值
label:{
show:true,
padding:3,
textShadowBlur:20,
textShadowColor:'rgba(0, 0, 0, 0.8)'
},
（二）显示markpoint
markPoint:{
symbol:'pin',
symbolSize:30,
data:[
{type: 'min', name: '最小值'},
{type: 'max', name: '最大值'},
]
},
（三）显示markline
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}，
（四）修改柱子的颜色
series: [{
name: '销量',
type: 'bar',
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f'],
data: [5, 20, 36, 10, 10, 20],
（五）设置背景色
backgroundColor: '#999',
（六）设置visualMap效果
visualMap: {
show: false,
min: 0,
max: 50,
inRange: {
colorLightness: [0, 1]
}
},
（七）增加数据区域缩放组件
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
],
（七）最终完整的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="{{ url_for('static',filename='echarts.min.js') }}"></script>
</head>
<body>
<h1>hello echarts</h1>
<!-- 为 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 = {
backgroundColor: '#999',
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'slider',
yAxisIndex: 0,
start: 30,
end: 80
},
{
type: 'inside',
yAxisIndex: 0,
start: 30,
end: 80
}
],
visualMap: {
show: false,
min: 0,
max: 50,
inRange: {
colorLightness: [0, 1]
}
},
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
color: ['#32C5E9'],
data: [5, 20, 36, 10, 10, 20],
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
label:{
show:true,
padding:3,
textShadowBlur:20,
textShadowColor:'rgba(0, 0, 0, 0.8)'
},
markPoint:{
symbol:'pin',
symbolSize:30,
data:[
{type: 'min', name: '最小值'},
{type: 'max', name: '最大值'},
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
（八）运行效果
好吧，纯练手的作品，而且这只是介绍基础知识，因此UI不是本博文的重点，纯属抛砖引玉，希望大家喜欢。
感谢各位的阅读。
参考资料：https://www.echartsjs.com/zh/index.html
