Echarts3中的交互组件

Echarts3提供的视图组件

除了图表外 ECharts 中，提供了很多交互组件。
- 图例组件 legend
- 标题组件 title
- 视觉映射组件 visualMap
- 数据区域缩放组件 dataZoom
- 时间线组件 timeline
- 地图组件geo
- 区域选择组件brush
- 雷达图坐标系组件 radar
- 平行坐标系涉及的三个组件 parallel、parallelAxis、series-parallel
- …etc…

Echarts3对比Echarts2是一个比较大的版本升级，但是他的升级更加适应了当前现代前端模块化技术的需求。同时API设计更加灵活了。

标题组件（title）：

常用度：5星
标题组件，包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

坐标轴组件：

常用度：4星
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

如果是单个象限，option.xAxis 与 option.yAxis 为一个对像，如果想要多个象限，可以到grip组件中设置象限的位置，同时option.xAxis 与 option.yAxis 为数组，分别设置几个不同的象限的对象。
这个在API中没说明，但Echarts3中的代码实例，也清楚的给出了实现。

视觉映射组件（visualMap）

常用度：4星
visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容，会自动转换成 visualMap 配置项。在option中推荐写 visualMap 而非 dataRange。

区域选择组件（brush）

常用度：4星
brush 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。

✦ 刷子的类型和启动按钮 ✦
目前 brush 组件支持的图表类型：scatter、bar、candlestick（parallel 本身自带刷选功能，但并非由 brush 组件来提供）。
点击 toolbox 中的按钮，能够进行『区域选择』、『清除选择』等操作。
参见：http://echarts.baidu.com/option.html#brush

toolbox

常用度：5星
工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
除了内部定义的工具，除了各个内置的工具按钮外，还可以自定义工具按钮。注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: '自定义扩展方法1',
                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: '自定义扩展方法',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

timeline

常用度：3星
timeline 和其他组件有些不同，它需要操作『多个option』。 假设，我们把 ECharts 的传统的option称为 原子option，那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个 原子option 的 复合option。如下示例：
使用注意与最佳实践：
公有的配置项，推荐配置在 baseOption 中。timeline 播放切换时，会把 options 数组中的对应的 option，与 baseOption 进行 merge 形成最终的 option。
options 数组中，如果某一数组项中配置了某个属性，那么其他数组项中也必须配置某个属性，而不能缺省。否则这个属性的执行效果会遗留。
复合 option 中的 options 不支持 merge。
也就是说，当第二（或三、四、五 …）次 chart.setOption(rawOption) 时，如果 rawOption 是 复合 option（即包含 options 列表），那么新的 rawOption.options 列表不会和老的 options 列表进行 merge，而是简单替代。当然，rawOption.baseOption 仍然会正常和老的 option 进行merge。

与 ECharts2 的兼容性：
ECharts3 中不再支持 timeline.notMerge 参数，也就是不支持 notMerge 模式。如果遇到这种场景需要使用，可在外部进行option管理，并用 setOption(option, true) 这样的notMerge方式设置。
ECharts3 和 ECharts2 相比，timeline 属性的定义位置有所不同，移到了 baseOption 中，统一作为一个普通的组件看待。但是，仍然兼容 ECharts2 的 timeline 定义位置，只是不再推荐这样写。