You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2019/07/04 09:13:08 UTC
[GitHub] [incubator-echarts] zhouxin860114 commented on issue #10745: How
create the timeline with train status on travel?
zhouxin860114 commented on issue #10745: How create the timeline with train status on travel?
URL: https://github.com/apache/incubator-echarts/issues/10745#issuecomment-508406900
> > ```js
> > colorStops: [{
> > offset: 0, color: 'green' // color at 0% position
> > }, {
> > offset: 0.1, color: 'green' // color at 10% position
> > }, {
> > offset: 0.10000001, color: 'grey' // color at 100% position
> > }]
> > ```
>
> This not working :( Isn't possible set color dynamic not by offset?? because the dates is dynamic and i would set color green from 2002 to 2006 or 2008....
It working well here ...
https://gallery.echartsjs.com/editor.html?c=xwsyY9DhLb&v=2
``currentIndex = 2; // 0, 1, 2, 3, ....
len = 9; // len = option.baseOption.timeline.data.length
option = {
baseOption: {
timeline: {
axisType: 'category',
top: 'auto',
currentIndex: currentIndex, // 'currentIndex: 2' -> 'currentIndex: currentIndex'
controlStyle: {
show: false
},
data: [
'2002-01-01', '2003-01-01', '2004-01-01',
{
value: '2005-01-01',
symbol: 'diamond',
symbolSize: 16
},
'2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
{
value: '2011-01-01',
symbol: 'diamond',
symbolSize: 18
},
],
label: {
formatter: function(s) {
return (new Date(s)).getFullYear();
},
position: 'top',
rotate: 90,
padding: -10
},
lineStyle: {
width: 5, // I am nearsighted ...
color: {
type: 'linear',
colorStops: [{
offset: currentIndex / len,
color: 'green' // color at position < (currentIndex / len)
}, {
offset: currentIndex / len,
color: 'grey' // color at position > (currentIndex / len)
}]
}
}
}
}
};
myChart.on('timelinechanged', function(params) {
option.baseOption.timeline.currentIndex = params.currentIndex;
option.baseOption.timeline.lineStyle.color.colorStops[0].offset = params.currentIndex / (option.baseOption.timeline.data.length - 1);
option.baseOption.timeline.lineStyle.color.colorStops[1].offset = params.currentIndex / (option.baseOption.timeline.data.length - 1);
myChart.setOption(option);
});``
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org