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中包含的事件