Echarts的使用与配置项
ECharts
百度的ECharts目前在国内使用的比较多，所以总结了一些相关知识；官网地址，详细的可以参考：https://www.echartsjs.com/zh/index.html
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建
移动端优化
ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积，可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘
获取 ECharts
你可以通过以下几种方式获取 ECharts。
-
从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
-
在 ECharts 的 GitHub 上下载最新的
release版本，解压出来的文件夹里的dist目录里可以找到最新版本的 echarts 库。 -
通过 npm 获取 echarts，
npm install echarts --save，详见“在 webpack 中使用 echarts”
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
</html>绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<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]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>这样你的第一个柱状图表就诞生了！
异步加载
入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});});ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。
loading 动画
如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。
另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。
为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。
ECharts组件的定位和布局
大部分『组件』和『系列』会遵循两种定位方式：
left/right/top/bottom/width/height 定位方式：
这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。
绝对值 ：单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 {left: 23, height: 400}。
百分比 ：表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 {right: '30%', bottom: '40%'}。
位置描述 ：A 可以设置 left: 'center'，表示水平居中。 B 可以设置 top: 'middle'，表示垂直居中。
这六个量的概念，和 CSS 中六个量的概念类似：
- left：距离 DOM 容器左边界的距离。
- right：距离 DOM 容器右边界的距离。
- top：距离 DOM 容器上边界的距离。
- bottom：距离 DOM 容器下边界的距离。
- width：宽度。
- height：高度。
在横向，left、right、width 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 left 和right 或者 right 和 width 都可以决定组件的位置和大小。 纵向，top、bottom、height 三个量，和横向类同不赘述。
center / radius 定位方式：
-
center是一个数组，表示
[x, y]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同。 -
radius是一个数组，表示
[内半径, 外半径]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。在自适应容器大小时，百分比设置是很有用的。
横向（horizontal）和纵向（vertical）
ECharts的『外观狭长』型的组件（如 legend、visualMap、dataZoom、timeline等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。
横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 'horizontal' 或者'vertical'。
于 ECharts2 的兼容：
ECharts2 中的 x/x2/y/y2 的命名方式仍被兼容，对应于 left/right/top/bottom。但是建议写 left/right/top/bottom。
位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'。这些语句分别等效于：right: 0、left: 0、bottom: 0、top: 0，写成后者就不奇怪了。
Echarts的配置项 。详细属性请参考官方文档：https://www.echartsjs.com/zh/option.html
title：标题组件，包含主标题和副标题。
legend：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平），参见：legend.type。
grid ：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，
在 ECharts 3 中可以存在任意个 grid 组件。
xAxis ：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
yAxis ：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
polar ：极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。
radiusAxis ：极坐标系的径向轴。
angleAxis ：极坐标系的角度轴。
radar ：雷达图坐标系组件，只适用于雷达图。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件，为避免混淆，雷达图使用 radar 组件作为其坐标系。
dataZoom ：组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
visualMap ：是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
tooltip ：提示框组件的通用介绍：
提示框组件可以设置在多种地方：
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip
axisPointer ：这是坐标轴指示器（axisPointer）的全局公用设置。
toolbox ：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
brush ：是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。
geo ：地理坐标系组件。
地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
3.1.10 开始 geo 组件也支持鼠标事件。事件参数为:
{
componentType: 'geo',
// Geo 组件在 option 中的 index
geoIndex: number,
// 点击区域的名称，比如"上海"
name: string,
// 传入的点击区域的 region 对象，见 geo.regions
region: Object
}Tip: geo 区域的颜色也可以被 map series 所控制，参见 series-map.geoIndex。
parallel ：平行坐标系:平行坐标系（Parallel Coordinates） 是一种常用的可视化高维数据的图表。
例如 series-parallel.data 中有如下数据： 平行坐标系适用于对这种多维数据进行可视化分析。每一个维度（每一列）对应一个坐标轴，每一个『数据项』是一条线，贯穿多个坐标轴。在坐标轴上，可以进行数据选取等操作。
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
{ // 数据项也可以是 Object，从而里面能含有对线条的特殊设置。
value: [5, 42, 24, 44, 0.76, 40, 16, '优']
lineStyle: {...},
}
...
]
数据中，每一行是一个『数据项』，每一列属于一个『维度』。（例如上面数据每一列的含义分别是：『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。需要涉及到三个组件：parallel、parallelAxis、series-parallel
这个配置项是平行坐标系的『坐标系』本身。一个系列（series）或多个系列（如上图中的『北京』、『上海』、『广州』分别各是一个系列）可以共用这个『坐标系』。
和其他坐标系一样，坐标系也可以创建多个。
位置设置，也是放在这里进行。
这个是『坐标系』中的坐标轴的配置。自然，需要有多个坐标轴。
其中有 parallelAxis.parallelIndex 属性，指定这个『坐标轴』在哪个『坐标系』中。默认使用第一个『坐标系』。
这个是『系列』的定义。系列被画到『坐标系』上。
其中有 series-parallel.parallelIndex 属性，指定使用哪个『坐标系』。默认使用第一个『坐标系』。
singleAxis : 单轴。可以被应用到散点图中展现一维数据
timeline ：组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。timeline 和其他组件有些不同，它需要操作『多个option』。
假设，我们把 ECharts 的传统的 option 称为原子option，那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个原子option的复合option。
graphic ：是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
calendar ：日历坐标系组件。在ECharts中，我们非常有创意地实现了日历图，是通过使用日历坐标系组件来达到日历图效果的，如下方的几个示例图所示，我们可以在热力图、散点图、关系图中使用日历坐标系。
dataset ：Charts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
关于 dataset 的详情，请参见教程。
aria ：W3C 制定了无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，
支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。
默认关闭，需要通过将 aria.show 设置为 true 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。
series ：系列列表。每个系列通过 type 决定自己的图表类型
color ：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
默认为：['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
backgroundColor ：背景色，默认无背景。颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，
比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
// 纹理填充
color: {
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
textStyle ：全局的字体样式。
animation ： 是否开启动画。
animationThres ：2000 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationThreshold ：1000 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
animationDuration: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}animationEasing ：cubicOut 初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
animationDelay ： 0初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
animationDurationUpdate : 300 数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果
animationEasingUpdate ：cubicOut数据更新动画的缓动效果。
animation DelayUpdate :0 数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
blendMode : 'source-over'图形的混合模式，不同的混合模式见 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 。
默认为'source-over'。 支持每个系列单独设置。
'lighter'也是比较常见的一种混合模式，该模式下图形数量集中的区域灰颜色叠加成高亮度的颜色（白色），常常能起到突出该区域的效果。
hoverlayerThreshold : 3000, 图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层。单独的 hover 层主要是为了在高亮图形的时候
不需要重绘整个图表，只需要把高亮的图形放入单独的一个 canvas 层进行绘制，防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。
ECharts 2 里是底层强制使用单独的层绘制高亮图形，但是会带来很多问题，比如高亮的图形可能会不正确的遮挡所有其它图形，
还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示，还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。
因此 3 里默认不会开启该优化，只有在图形数量特别多，有必要做该优化时才会自动开启。
useUTC : false 是否使用 UTC 时间。true: 表示axis.type为'time'时，依据 UTC 时间确定 tick 位置，并且axisLabel和tooltip默认展示的是 UTC 时间。false: 表示axis.type为'time'时，依据本地时间确定 tick 位置，并且axisLabel和tooltip默认展示的是本地时间。
默认取值为false，即使用本地时间。因为考虑到：
很多情况下，需要展示为本地时间（无论服务器存储的是否为 UTC 时间）。
如果 data 中的时间为 '2012-01-02' 这样的没有指定时区的时间表达式，往往意为本地时间。默认情况下，时间被展示时需要和输入一致而非有时差。
注意，这个参数实际影响的是『展示』，而非用户输入的时间值的解析。 关于用户输入的时间值（例如 1491339540396, '2013-01-04' 等）的解析，参见 date 中时间相关部分。
