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