echarts中的timeline
echarts中timeline使用
·
当我拿到需求,想着如何在echart图表上展示多个数据,但由于数据不是连续的,并且展示一天内的数据过多(能有10多万条),考虑到优化,将所有的数据根据时间进行分组,通过二维数组进行实现,每当当前数据和下一个数据的时间相差10min以上,就把这段数据放入一个新的数组。
然后要对数组中的每一个数组中的数据渲染到echart中的折线图中,legend是无法实现的,于是看到了timeline组件。
将数组中长度小于10的元素过滤掉,因为展示数据量太少,没有意义。???这个有待考虑 适用性。
timeline组件中我配置了如下基本设置:
timeline: {
axisType: 'category', //轴的类型这里我设置了类目轴
show: true,
autoPlay: false, //不自动播放
data: timeLineData, //timeline坐标轴上展示的数据
top: '3%',
controlStyle:{
showPlayBtn: true //可以控制button播放是否显示
},
replaceMerge: 'series', //如果需要下一个时间刻度的 series 完全替换上一个时间刻度的 series 而不进行任何 merge ,可以设置 replaceMerge: 'series',并且两个时间刻度的 series id 不相同或者没有 id 。
realtime: true, //拖动圆点的时候,实时更新试图。
symbol: 'emptyCircle',//轴上点的显示类型
},
对二维数组遍历的时候,其中每一项配置到dataset上,
dataset: [
{
dimensions: [...columns.map(c => {
return c.showName;
}), "xAxis"],
source: dataWithXaxis(item, columns),
sourceHeader: false
}, ...dataYPlus.cfgs.map(cs => {
return {
transform: {
type: "filter",
config: {
and: cs.length > 0 ? cs : [{dimension: 0, "!=": null}]
}
}
};
})
],
因为timeline中baseOption在merge的时候会跟option合并在一起,所以我们数据应该配置在options数组中。
写法仿照echarts中的官方文档里面的案例:
// 如下,baseOption 是一个 『原子option』,options 数组
// 中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption({
// `baseOption` 的属性.
timeline: {
...,
// `timeline.data` 中的每一项,对应于 `options`
// 数组中的每个 `option`
data: ['2002-01-01', '2003-01-01', '2004-01-01']
},
grid: { ... },
xAxis: [ ... ],
yAxis: [ ... ],
series: [{
// 系列一的一些其他配置
type: 'bar',
...
}, {
// 系列二的一些其他配置
type: 'line',
...
}, {
// 系列三的一些其他配置
type: 'pie',
...
}],
// `switchableOption`s:
options: [{
// 这是'2002-01-01' 对应的 option
title: {
text: '2002年统计值'
},
series: [
{ data: [] }, // 系列一的数据
{ data: [] }, // 系列二的数据
{ data: [] } // 系列三的数据
]
}, {
// 这是'2003-01-01' 对应的 option
title: {
text: '2003年统计值'
},
series: [
{ data: [] },
{ data: [] },
{ data: [] }
]
}, {
// 这是'2004-01-01' 对应的 option
title: {
text: '2004年统计值'
},
series: [
{ data: [] },
{ data: [] },
{ data: [] }
]
}]
});
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)