eCharts学习第一阶段
前言：最近因为项目需要，要做大屏显示页面，公司硬性要求要使用eCharts，自己以前也没有接触过eCharts，所以在使用eCharts的过程中，也走过不少的弯路，踩了不少的坑，当然，目前用的比较多的是柱状图、折线图、饼状图、环形嵌套饼状图、极坐标饼状图，我会在本篇文章中给大家详细介绍自己在使用上述图形中遇到的坑，当然后续还会和大家分享eCharts中的其他图表，希望和大家能够共同学习，持续进步！
在我们学习eCharts之前，首先要明确它的一些基本概念：
- eCharts是什么？
eCharts，是由百度开发和维护的一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE/8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
以上是官方对它的定义，个人理解就是基于html5的canvas元素封装的图表组件。 - 我们可以使用eCharts做什么？
eCharts提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图、多维数据可视化的平行坐标，还有用于BI的漏斗图、仪表盘，并且支持图与图之间的混搭。
我们明确了这两个概念，非常有利于我们以下内容的学习。当然学习eCharts最总要的一件事就是学会查找官方文档，学会查找官方文档，学会查找官方文档，重要的事情说三遍！因为eCharts图表配置项多且灵活，谁也一下子记不了那么多的配置项，所以一定要学会查文档。
首先带大家，了解一下在一个eCharts图表中都有哪些基本的配置项：
- title：{}，标题组件，包含主标题和副标题。
- legend：{}，图例组件。
- grid：{}，直角坐标系内绘图网格，单个grid内最多可以放置上下两个X轴，左右两个Y轴。可以在网格上绘制折线图、柱状图、散点图（气泡图）。
- xAxis：{}，直角坐标系grid中的x轴，一般情况下单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同个位置多个x轴重叠。
- yAxis：{}，直角坐标系grid中的y轴，一般情况下单个grid组件最多只能放左右两个y轴，多于两个y轴需要通过配置offset属性防止同个位置多个Y轴的重叠。
- polar:{}，极坐标系，可以用于散点图和折线图。每个极坐标拥有一个角度轴和一个半径轴。
- radiusAxis：{}，极坐标的径向轴。
- angleAxis：{}，极坐标的角度轴。
- rader：{}，雷达图坐标系组件，只适用于雷达图。该组件等同eCharts2总的polar组件。因为3中的polar被重构为标准的极坐标组件，为避免混淆，雷达图使用radar组件作为其坐标系。
雷达图坐标系与极坐标系不同的是它的每一个轴都是一个单独的维度。 - dataZoom：[ ]，dataZoom组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或去除离群点的影响。
- visualMap：[ ]，visualMap是视觉映射组件，用于进行视觉编码，也就是将数据映射到视觉元素（视觉通道）。
- tooltip：{}，提示框组件。
- axisPointer：{}，这是坐标轴指示器（axisPointer）的全局公用设置。
- toolbox：{}，工具框。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
- brush：{}，brush是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。
- geo：{}，地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理地理坐标系上绘制散点图，线集。
- parallel：{}，平行坐标系是一种常见的可视化高维数据的图表。
- parallelAxis：{}，这个组件是平行坐标系中的坐标轴。
- singleAxis：{}，单轴，可以被应用到散点图中展现一维数据。
- timeline：{}，timeline组件，提供了在多个eCharts option间进行切换、播放等操作的功能。
- graphic：{}，graphic是原生图形元素组件。
- calendar：{}，日历坐标系组件。
- dataset：{}，eCharts 4开始支持了数据集（dataset）组件用于单独的数据集声明，从而数据可单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
- series：[ ]，系列列表，每个系列通过type决定自己的图表类型。
- color：{}，调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
- backgroundColor：{}，背景色，默认无背景。
- textStyle：{}，全局的字体样式。
当然后续还有一些动画效果，和其他一些不太常用特性，在这里就不一一介绍了，感兴趣的童鞋可以去官网看一下。
