Estoy usando Apache ECharts 5.2.2 y trato de mostrar algunas áreas de marca en el gráfico en un eje de tiempo.
Apache ECharts proporciona algunos ejemplos útiles para acceder a algunas opciones específicas. Area Pieces es un ejemplo en el que puede configurar su propia EChartsOption con markArea .
Traté de ajustar el ejemplo a mis necesidades, pero no puedo ejecutarlo en el eje de tiempo usando el objeto Date .
Si pega la siguiente EChartsOption en el ejemplo, tendrá una idea.
option = { xAxis: { type: 'time', // changed from 'category' boundaryGap: false }, yAxis: { type: 'value', boundaryGap: [0, '30%'] }, visualMap: { type: 'piecewise', show: false, dimension: 0, seriesIndex: 0, pieces: [ { min: new Date('2019-10-11'), // old tag was gt max: new Date('2019-10-13'), // old tag was lt color: 'rgba(0, 0, 180, 0.4)' }, { min: new Date('2019-10-15'), // old tag was gt max: new Date('2019-10-17'), // old tag was lt color: 'rgba(0, 0, 180, 0.4)' } ] }, series: [ { type: 'line', smooth: 0.6, symbol: 'none', lineStyle: { color: '#5470C6', width: 5 }, markLine: { symbol: ['none', 'none'], label: { show: true }, data: [{ xAxis: new Date('2019-10-11') }, { xAxis: new Date('2019-10-13') }, { xAxis: new Date('2019-10-15') }, { xAxis: new Date('2019-10-17') }] }, areaStyle: {}, data: [ // changed from string [new Date('2019-10-10'), 200], [new Date('2019-10-11'), 560], [new Date('2019-10-12'), 750], [new Date('2019-10-13'), 580], [new Date('2019-10-14'), 250], [new Date('2019-10-15'), 300], [new Date('2019-10-16'), 450], [new Date('2019-10-17'), 300], [new Date('2019-10-18'), 100] ] } ] }; visualMap define pieces que tienen una etiqueta inicial min y una etiqueta final max del área visualizada para resaltar. Desafortunadamente, el área no acepta el comienzo y el final del objeto Date definido y resalta todo el gráfico.
¿Qué estoy haciendo mal para que funcione en el eje del tiempo? Encontré un informe de error que se corrigió en la versión 5.2.1 para datos de tiempo de cadena. Incluso la string no funciona, así que supongo que hice algo mal aquí... ¿Alguna pista?
¡Gracias por adelantado!
finalmente lo hice
Las etiquetas min y max en pieces necesitan un número para manejar correctamente los datos en el eje de tiempo. Por lo tanto, dar la marca de tiempo del objeto Date llamando al método getTime() es suficiente.
pieces: [ { min: new Date('2019-10-11').getTime(), max: new Date('2019-10-13').getTime(), color: 'rgba(0, 0, 180, 0.4)' }, { min: new Date('2019-10-15').getTime(), max: new Date('2019-10-17').getTime(), color: 'rgba(0, 0, 180, 0.4)' } ]Tal vez, alguien más tenga el mismo problema. La documentación de Apache ECharts a veces no es lo suficientemente precisa.