I’m trying to get back the first and the last value in ECHARTS on a graph like this
where there’s also a zoomable zone
I’ve tryied
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
function test(){
console.log(myChart.getOption());
}
test();
</script>
that gives back the series object after initialization.
So you can get back the first and last coords like this
first_serie_coords = myChart.getOption().series[0].coords; //depends on how you provided the data
first_element = first_serie_coords[0]
last_element = first_serie_coords[first_serie_coords.length - 1]
console.log(first_element, last_element)
But how to get the start and the end point when the graph’s zooming zone it’s initialized and then resized?
Here’s a snippet to work on easy (open it in full screen)
rawData = [
["2004-01-02",10452.74,10409.85,10367.41,10554.96,168890000],
["2004-01-05",10411.85,10544.07,10411.85,10575.92,221290000],
["2004-01-06",10543.85,10538.66,10454.37,10584.07,191460000],
["2004-01-07",10535.46,10529.03,10432,10587.55,225490000],
["2004-01-08",10530.07,10592.44,10480.59,10651.99,237770000],
["2004-01-09",10589.25,10458.89,10420.52,10603.48,223250000],
["2004-01-12",10461.55,10485.18,10389.85,10543.03,197960000],
["2004-01-13",10485.18,10427.18,10341.19,10539.25,197310000],
["2004-01-14",10428.67,10538.37,10426.89,10573.85,186280000],
["2004-01-15",10534.52,10553.85,10454.52,10639.03,260090000],
["2004-01-16",10556.37,10600.51,10503.7,10666.88,254170000],
["2004-01-20",10601.4,10528.66,10447.92,10676.96,224300000],
["2004-01-21",10522.77,10623.62,10453.11,10665.7,214920000],
["2004-01-22",10624.22,10623.18,10545.03,10717.4,219720000],
["2004-01-23",10625.25,10568.29,10490.14,10691.77,234260000],
["2004-01-26",10568,10702.51,10510.44,10725.18,186170000],
["2004-01-27",10701.1,10609.92,10579.33,10748.81,206560000],
["2004-01-28",10610.07,10468.37,10412.44,10703.25,247660000],
["2004-01-29",10467.41,10510.29,10369.92,10611.56,273970000],
["2004-01-30",10510.22,10488.07,10385.56,10551.03,208990000],
["2004-02-02",10487.78,10499.18,10395.55,10614.44,224800000],
["2004-02-03",10499.48,10505.18,10414.15,10571.48,183810000],
["2004-02-04",10503.11,10470.74,10394.81,10567.85,227760000],
["2004-02-05",10469.33,10495.55,10399.92,10566.37,187810000],
["2004-02-06",10494.89,10593.03,10433.7,10634.81,182880000],
["2004-02-09",10592,10579.03,10433.7,10634.81,160720000],
]
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
const upColor = '#00da3c';
const downColor = '#ec0000';
function splitData(rawData) {
let categoryData = [];
let values = [];
let volumes = [];
for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
}
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data.values[i - j][1];
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
}
//$.get('https://echarts.apache.org/examples/data/asset/data/stock-DJI.json', function (rawData) {
var data = splitData(rawData);
//console.log(data);
myChart.setOption(
(option = {
animation: false,
legend: {
bottom: 10,
left: 'center',
data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
const obj = {
top: 10
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
// extraCssText: 'width: 170px'
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
],
label: {
backgroundColor: '#777'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
visualMap: {
show: false,
seriesIndex: 5,
dimension: 2,
pieces: [
{
value: 1,
color: downColor
},
{
value: -1,
color: upColor
}
]
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{
type: 'category',
data: data.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100
}
},
{
type: 'category',
gridIndex: 1,
data: data.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 50,
end: 100
},
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 50,
end: 100
}
],
series: [
{
name: 'Dow-Jones index',
type: 'candlestick',
data: data.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: undefined,
borderColor0: undefined
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.volumes
}
]
}),
true
);
//});
option && myChart.setOption(option);
//console.log(myChart);
//console.log(myChart.getOption());
first_serie_coords = myChart.getOption().series[0].data;
first_element = first_serie_coords[0];
last_element = first_serie_coords[first_serie_coords.length - 1];
console.log(first_element, last_element);<div id="main" style="width: 500px; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
A dataZoom component configured through the
option object, (like those you implemented in your code), when passed through the
setOption method and
retrieved through getOption
gets completed with default and computed values.
The computed values you may use to determine the first and last visible data items under zoom
are .startValue,
and .endValue,
which are available for both the type: 'inside' and type: 'slider' dataZoom objects;
for a category x axis like it is your case, their computed values are the indices of the first and
last visible axis categories, which are also the indices of the first and last visible data items
(assuming there are no null data entries).
See also rangeMode
for solutions in the case the x axis is not of type category but of type value.
So, your code can be adapted to use these properties:
....................
myChart.setOption(option);
const optionFull = myChart.getOption();
const first_serie_coords = optionFull.series[0].data;
const dataZoom = optionFull.dataZoom[0];
const startValue = dataZoom && dataZoom.startValue || 0,
endValue = dataZoom && dataZoom.endValue || first_serie_coords.length - 1;
const first_element = first_serie_coords[startValue];
const last_element = first_serie_coords[endValue];
console.log(first_element, last_element);
And the snippet adapted, with some more details:
rawData = [
["2004-01-02",10452.74,10409.85,10367.41,10554.96,168890000],
["2004-01-05",10411.85,10544.07,10411.85,10575.92,221290000],
["2004-01-06",10543.85,10538.66,10454.37,10584.07,191460000],
["2004-01-07",10535.46,10529.03,10432,10587.55,225490000],
["2004-01-08",10530.07,10592.44,10480.59,10651.99,237770000],
["2004-01-09",10589.25,10458.89,10420.52,10603.48,223250000],
["2004-01-12",10461.55,10485.18,10389.85,10543.03,197960000],
["2004-01-13",10485.18,10427.18,10341.19,10539.25,197310000],
["2004-01-14",10428.67,10538.37,10426.89,10573.85,186280000],
["2004-01-15",10534.52,10553.85,10454.52,10639.03,260090000],
["2004-01-16",10556.37,10600.51,10503.7,10666.88,254170000],
["2004-01-20",10601.4,10528.66,10447.92,10676.96,224300000],
["2004-01-21",10522.77,10623.62,10453.11,10665.7,214920000],
["2004-01-22",10624.22,10623.18,10545.03,10717.4,219720000],
["2004-01-23",10625.25,10568.29,10490.14,10691.77,234260000],
["2004-01-26",10568,10702.51,10510.44,10725.18,186170000],
["2004-01-27",10701.1,10609.92,10579.33,10748.81,206560000],
["2004-01-28",10610.07,10468.37,10412.44,10703.25,247660000],
["2004-01-29",10467.41,10510.29,10369.92,10611.56,273970000],
["2004-01-30",10510.22,10488.07,10385.56,10551.03,208990000],
["2004-02-02",10487.78,10499.18,10395.55,10614.44,224800000],
["2004-02-03",10499.48,10505.18,10414.15,10571.48,183810000],
["2004-02-04",10503.11,10470.74,10394.81,10567.85,227760000],
["2004-02-05",10469.33,10495.55,10399.92,10566.37,187810000],
["2004-02-06",10494.89,10593.03,10433.7,10634.81,182880000],
["2004-02-09",10592,10579.03,10433.7,10634.81,160720000],
]
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
const upColor = '#00da3c';
const downColor = '#ec0000';
function splitData(rawData) {
let categoryData = [];
let values = [];
let volumes = [];
for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
}
return {
categoryData: categoryData,
values: values,
volumes: volumes
};
}
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data.values[i - j][1];
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
}
//$.get('https://echarts.apache.org/examples/data/asset/data/stock-DJI.json', function (rawData) {
var data = splitData(rawData);
//console.log(data);
myChart.setOption(
(option = {
animation: false,
legend: {
bottom: 10,
left: 'center',
data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
const obj = {
top: 10
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
// extraCssText: 'width: 170px'
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
],
label: {
backgroundColor: '#777'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
visualMap: {
show: false,
seriesIndex: 5,
dimension: 2,
pieces: [
{
value: 1,
color: downColor
},
{
value: -1,
color: upColor
}
]
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{
type: 'category',
data: data.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100
}
},
{
type: 'category',
gridIndex: 1,
data: data.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 50,
end: 100
},
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 50,
end: 100
}
],
series: [
{
name: 'Dow-Jones index',
type: 'candlestick',
data: data.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: undefined,
borderColor0: undefined
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.volumes
}
]
}),
true
);
//});
myChart.setOption(option);
function getExtremeVisiblePoints(){
const optionFull = myChart.getOption();
const first_serie_coords = optionFull.series[0].data;
const dataZoom = optionFull.dataZoom[0];
const startValue = dataZoom && dataZoom.startValue || 0,
endValue = dataZoom && dataZoom.endValue || first_serie_coords.length - 1;
const first_element = first_serie_coords[startValue];
const last_element = first_serie_coords[endValue];
document.querySelector('#point1').innerText = first_element;
document.querySelector('#point2').innerText = last_element;
//console.log({startValue, endValue})
//console.log({first_element, last_element});
}
myChart.on('datazoom', ()=>{
document.querySelector('#point1').innerText = '';
document.querySelector('#point2').innerText = '';
});<button onclick="getExtremeVisiblePoints()">Get Extreme Visible Points</button><br>
<code id="point1" style="font-size: small"></code><br>
<code id="point2" style="font-size: small"></code>
<div id="main" style="width: 500px;height: 500px"></div>
<div id="main" style="width: 500px; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>5