1. Currently, many of the fund and stock malls of major securities companies are implemented using H5. When talking about funds, the trend chart of fund stocks is inseparable. So the first thing that comes to mind is to use echarts to implement it. The trend chart content is displayed using The line chart of echarts couldn’t be more suitable, and the data can be displayed in one set.
2. But the question also arises, how to display the most important cross coordinate of the fund, that is, the cross coordinate point of the fund must be displayed in real time according to the position of the finger sliding, and echarts only provides the y-axis, that is, the vertical axis indicator line. Display function, the picture below is the y-axis indicator line function implemented using echarts configuration.
3. The following is the specific implemented echarts configuration item, the main one is the axisPointer configuration item, the label configuration inside is used to display the date at the bottom of the y-axis indicator line, and lineStyle is used to configure basic attributes such as the indicator line color:
const option = {
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
snap: true
},
formatter(params) {
props.handleTooltipClick & amp; & amp; props.handleTooltipClick(params); // Click to use
}
},
color: ['#F3402F', '#4C7CF1'],
grid: {
top: gridTop,
left: '1',
right: '1',
bottom: '30px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(153, 153, 153, 0.2)',
type: 'dashed'
}
},
axisLabel: {
fontSize,
color: '#999',
margin: 16,
showMaxLabel: true,
showMinLabel: true,
interval: index => index === 0 || index === chartData.xData.length - 1 || index === Math.floor(chartData.xData.length / 2),
formatter(value, index) {
if (index === 0) {
return `${space}${dayjs(value).format('YYYY-MM-DD')}`;
} else if (index === chartData.xData.length - 1) {
return `${dayjs(value).format('YYYY-MM-DD')}${space}`;
}
return dayjs(value).format('YYYY-MM-DD');
},
...axisLabel
},
axisPointer: {
label: {
formatter(obj) {
return `${obj.value.substring(4, 6)}-${obj.value.substring(6, 8)}`;
},
show: true,
padding: [2, 4, 2, 4],
fontSize,
borderRadius: 0,
backgroundColor: '#F24957'
},
lineStyle: {
color: '#FF5800', // indicator line color
type: 'dashed',
height: 0.4
}
},
data: chartData.xData
},
yAxis: {
type: 'value',
axisLabel: {
fontSize,
formatter(value) {
return parseFloat(value).toFixed(toFixed) + sign;
},
color: '#999'
},
splitLine: {
lineStyle: {
color: 'rgba(153, 153, 153, 0.2)',
type: 'dashed'
}
},
axisPointer: {
show: false // Hide y-axis indicator line
},
splitNumber: 5,
axisTick: {
show: false
},
axisLine: {
show: false
},
scale: true
},
series: [
{
type: 'line',
lineStyle: {
normal: {
width: lineWidth
}
},
symbol: 'none',
data: chartData.yData,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{ offset: 0, color: '#fff' }, { offset: 1, color: 'rgba(242, 73, 87, 0.1)' }],
global: false // Default is false
},
origin: 'start'
}
},
{
type: 'line',
lineStyle: {
normal: {
width: lineWidth
}
},
symbol: 'none',
data: chartData.yData1 || []
}
]
};
4. How to display the remaining x-axis indicator line? echarts does not provide an x-axis indicator line that can be configured and can automatically change coordinates according to finger sliding; the only displayed markLine configuration item can configure the x-axis indicator line, but it is static and cannot change in real time, so it must be added To listen for events, you can use the getZr() method of echarts to listen for mouse movement ‘mousemove’, and then obtain the coordinates and update the markLine configuration item in real time, so that the cross coordinates of the trend chart can be realized.
(1) First, markLine configures the static x-axis indicator line style. The following is the markLine configuration code
markLine: {
data: [],
animation: false,
label: {
formatter(obj) {
const plus = parseFloat(obj.value) > 0 ? ' + ' : '';
return plus + parseFloat(obj.value).toFixed(toFixed) + sign;
},
position: 'start',
padding: [2, 4, 2, 4],
fontSize,
borderRadius: 0,
backgroundColor: '#F24957',
color: '#fff'
},
lineStyle: {
color: '#FF5800', // indicator line color
type: 'dashed',
height: 0.4
},
symbol: 'none' // remove arrow
},
(2) Add the getZr() method below the setOption of echarts to monitor the mouse (finger) movement ‘mousemove’, and finally obtain the x-axis coordinate in real time and update the markLine configuration. The following is the specific implementation code:
const myChart = echarts.init(document.getElementById('lineChart'));
const option = setLineOption();
myChart.setOption(option);
// Simulate the horizontal axis of the cross axis
myChart.getZr().on('mousemove', (params) => {
// Get the coordinates of the click location
const pointInPixel = [params.offsetX, params.offsetY];
// if containPixel is true, the click position is within the coordinate axis
if (myChart.containPixel('grid', pointInPixel)) {
// Pass in the mouse position coordinates for conversion
// convertFromPixel returns [x, y], x corresponds to the subscript of the data at the mouse click, and y corresponds to the value at the mouse click.
const x = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
if (!data.yData.length) {
return;
}
const markLineValue = data.yData[x];
if (markLineValue) {
const series = option.series;
//Modify the value of markLine
series[0].markLine.data = [{ yAxis: markLineValue }];
//ResetOption
// console.log(series);
myChart.setOption({ series }, { lazyUpdate: true });
//Set the selected content
// props.handleTooltipClick({ axisValue: data.xData[x], value: data.yData[x], compRate: data.yData1 ? data.yData1[x] : '' });
}
} else {
//Do not display markLine if it is not within the coordinate axis
const series = option.series;
series[0].markLine.data = [];
myChart.setOption({ series }, { lazyUpdate: true });
}
});
myChart.getZr().on('mouseup', () => {
myChart.dispatchAction({
type: 'hideTip'
});
myChart.dispatchAction({
type: 'updateAxisPointer',
currTrigger: 'leave'
});
myChart.setOption({ series: [{ markLine: { data: [] } }] }, { lazyUpdate: true });
//Set the selected content
// props.handleTooltipClick({ axisValue: data.xData[data.xData.length - 1], value: data.yData[data.yData.length - 1], compRate: data.yData1 ? data.yData1[data.yData1 .length - 1] : '' });
});
