{site_name}

{site_name}

🌜 搜索

ECharts 中时间轴可以用于展示数据随时间的变化趋势,包括单个图表上的数据变化、多个图表之间的联动等

前端 𝄐 0
echarts中的timeline,echarts timeline,echarts设置y轴值间隔,echarts smooth,echarts设置,echarts设置y轴间隔
ECharts 中时间轴可以用于展示数据随时间的变化趋势,包括单个图表上的数据变化、多个图表之间的联动等。

具体操作包括:

1. 设置时间轴组件:在 ECharts 的 option 中通过设置 timeline 属性来定义时间轴组件,其中包括时间轴类型(轴线或者滑动条)、时间轴刻度、时间轴标签等。

2. 设置时间轴的数据:在时间轴组件中通过 data 属性来定义时间轴的数据。每一个数据项对应一个时间点,可以自定义时间轴的格式和范围。

3. 响应时间轴事件:通过设置 chart.on('timelinechanged', function(params){ ... }) 来响应时间轴的变化事件,从而实现多个图表之间的联动。

下面是一个简单的例子:


option = {
timeline: {
type: 'slider',
data: ['2015', '2016', '2017', '2018'],
label: {
formatter : function(s) {
return s.slice(0, 4);
}
},
playInterval: 1000,
autoPlay: true
},
series: [{
type: 'pie',
data: [
{value:335, name:'2015'},
{value:310, name:'2016'},
{value:234, name:'2017'},
{value:135, name:'2018'}
]
}]
};

chart.setOption(option);

chart.on('timelinechanged', function(params){
var year = params.currentIndex + 2015;
var data = [
{value: Math.random() * 500, name:'A'},
{value: Math.random() * 500, name:'B'},
{value: Math.random() * 500, name:'C'},
{value: Math.random() * 500, name:'D'}
];
chart.setOption({
series: [{
type: 'pie',
data: data
}]
});
});


在这个例子中,我们定义了一个带有滑动条的时间轴组件,包括四个时间点(2015 到 2018),然后通过响应 timelinechanged 事件来动态更新饼图的数据。用户可以通过滑动条或者自动播放来切换不同的时间点,从而观察数据随时间的变化趋势。