How to crawl stock dynamic graphic data - Echart prompt box data

Crawl Echart prompt box data

Recently, when the crawler encountered crawling echart graphic data, it was found that the API did not provide this method, but was generated through tooltip.

Tooltip prompt box component, echarts official website document address: link , native prompt box style The prompt boxes provided by echarts are all in a floating style.

Target website: A Qiangu XX website

Using the developer tools to search directly, it was found that key data such as institutional participation: 42.00 could not be located.
By searching the echart style keyword tooltip, you can find the key code for echart graphic generation:

After confirming the echart style, obtain the echart object in the console to generate the image. Required data:

Code:

var chart = echarts.init(document.getElementById("rzrq_chart"), 'write', {
    
    renderer:'canvas'});

Here, we use echarts.initthe method to initialize an echarts instance and pass in a DOM element as a parameter. This DOM element is the chart container we want to crawl data. In the example we use to document.getElementById("rzrq_chart")get rzrq_chartthe chart container element with the ID.

We then use getOptionthe method to get the current configuration options object from the echarts instance. getOptionReturns an object containing the chart's current options, which contains a series of configurations such as x-axis, y-axis, data series, etc.

Since in the example we want to get the data of the first series and the date data of the x-axis, we can get them with the following code:

var data = chart.getOption().series[0].data;
var date = chart.getOption().xAxis[0].data;

getOption().series[0].dataThe data of the first series, that is, the chart data, was obtained. getOption().xAxis[0].dataObtained the date data of the x-axis.

Next, you can use selenium or playwright to render the page and execute this js to obtain the data, and further process and use the data according to your own needs. You can save data to a database, export to CSV files, perform data analysis, and more.

Method Two:

Through the above echart style code, you can find the logic of visual graphics generation:

        zline_chart.setOption(option);
        zline_chart.hideLoading();

The option style mainly sets series[0].data and xAxis[0].data. These two parameters correspond to the following code:

        var x = [], y = [];
        for (var i = 0; i < data.length; i++) {
    
    
            x.unshift(moment_1["default"](data[i].TRADE_DATE).format('MM-DD'));
            y.unshift(utils_1["default"].toFixed2(data[i].ORG_PARTICIPATE * 100));
        }

The x and y are respectively from the api request ("api/data/v1/get",) in the above code, and then the echart style series data and x coordinate (xAxis data) are generated through the following code logic,

Through developer tool search, it is found that the ORG_PARTICIPATE and TRADE_DATE fields in the response are key parameters for generating y and x respectively.

Through the above API, you can directly obtain the corresponding time and corresponding institutional participation data.