echarts自学笔记
学习echarts的总结
一、图表的实现
(1)首先将echarts.js引入
为echarts提供一个DOM容器（具有宽高）
为echarts配置参数:
第一步：
初始化DOM容器，用echarts.init()函数
第二步：
配置数据选项var option={
title:{},//图表的标题
tooltip:{},//应用的组件
legend:{},//图例组件包括颜色、朝向、位置等
xAxis:[{}],//直角坐标系中x轴需要配置的
yAxis:[{}],//直角坐标系中y轴需要配置的
series:[{}],//系列列表，包括列表类型、颜色、数据等
}第三步：myChart.setOption(option);将数据选项更新 以上步骤就可以基本完成一个简单的图表。
实例（柱状图表）（南丁格尔图）
(2)要完成更复杂一些的图表就需要用一些其他的交互组件功能来实现，echarts内置了 图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline 等
实例（在图表中加入交互组件）
二、异步数据的加载和更新
（1）一般正常情况图表的数据多数都是异步加载的，需要从后台获取数去并异步的加载到页面。Echarts中实现异步只需要jquery中的工具异步获取数据后通过setOption填入数据和配置即可。如下：
var mychart=echarts.init(document.getElementById(‘main’));
$.get(‘data.json’).done(function(data){
mychart.setOption({
title:{},
tooltip:{},
legend:{},
xAxis:{},
yAxis:{},
series:[{
data:data
}]
})
})（2）还可以先设置一个空的坐标轴，然后再异步获取数据同样通过setOption载入，如果加载数据时间很长可以在获取数据的这段时间加上一个loading动画。只需调用showLoading ()方法就可以实现，数据加载完成后再用hideLoading()方法隐藏 。如下：
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);});（3）数据的动态更新
所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
一般地，是通过定时器定时获取数据并更新到页面
实例（数据的动态更新）
三、移动端的自适应
要实现的方法与CSS中的媒体查询方法类似，通过设置不同媒体下的的样式等实现功能。具体语法如下：
option = {
baseOption: { // 这里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 这里定义了 media query 的逐条规则。
{
query: {...}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
legend: {...},
...
}
}
]};实例中需要再引入timelineGDP.js和draggable.js其中timelineGDP.js还不知道作用是什么，到现在一直也都没有实现，还有待研究。但是实例中移动端的自适应还是正确的
实例（移动端的自适应）
四、数据的视觉映射
（1）概念
数据的可视化就是把数据到视觉元素的映射过程，例如折线图把数据用线表示，柱状图把数据用柱的高度表示诸如此类。
Echarts中的 visualMap 组件就提供数据视觉映射的功能，包括视觉映射中的图形类别，图形大小，颜色，透明度，颜色透明度，颜色明暗度，颜色饱和度，色调等。
（2）visualMap组件
visualMap提供了两种类型的组件，结构如下：
option = {
visualMap: [ // 可以同时定义多个 visualMap 组件。
{ // 第一个 visualMap 组件
type: 'continuous', // 定义为连续型 viusalMap
...
},
{ // 第二个 visualMap 组件
type: 'piecewise', // 定义为分段型 visualMap
...
}
],
...};实例（数据可视化）定义的是分段型visualMap
五、事件和行为
Echarts中所涉及的事件包含两种，一种是鼠标点击事件，或者hover时触发的事件；另一种是用户在使用可交互组件后触发的行为事件。如实例（在图表中加入交互组件）中的数据缩放时会触发datazoom事件。 事件的绑定用on
（1）鼠标事件
所有的鼠标事件都包含参数params，这是一个包含点击图形的数据信息的对象。可以在回调函数中获取这个对象中的函数名、系列名称等。 如下代码：
myChart.on('click', function (parmas) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// 通过饼图表现单个柱子中的数据分布
data: [detail.data]
}]
});
});});（2）组件交互的行为事件
交互组件都会触发事件其中的事件种类都在events文档中有列出。用法一样用on.
六、API
Echarts中包含的4个类型的API分别为：
echarts:{//一个全局对象，引入echarts.js后获得
init()//初始化实例，注意单个容器不能初始化多个实例
connect()//多个图表实例实现联动
disconnect()//解除图表之间的联动，如果只需要移除单个实例，可以 将通过将该图表实例 group 设为空
dispose()//销毁实例，销毁后无法再使用
getInstanceByDom()//获取DOM上的实例
registerMap()//注册可用的地图，必须在包括 geo 组件或者 map 图 表类型的时候才能使用。
getMap()//获取已注册的地图
registerTheme//注册主题，初始化时使用
},
echartsInstance:{},//通过echarts.init创建的实例可以获得实例的各种 属性
action:{},//echarts中支持的图表的行为包括legend:{},tooltip:{}等
events:{}//echarts中包含的事件