Shulou(Shulou.com)06/01 Report--

This article introduces what is the realization method of linkage interaction between large screen report components in big data. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

In the rapid development of the information age, large screen display has been widely used in communications, electric power, military command organizations, and plays an important role in providing shared information, decision support, situation display and so on. Behind these bright, gorgeous and huge solutions, they are actually supported by small and practical technical details, such as the linkage between large screen components.

Yes, do you already know what the editor is going to introduce next, so let's get started.

When we click on an area in the map, the right dashboard and column chart correspond to the data values for that area.

Guys, pay attention... ..

To achieve the effect of this big screen, we only need to take the following three steps:

First of all (the first step), define the components, as shown in the following figure, using echart map, dashboard, column chart respectively.

Secondly (the second step), the report component carries on the large screen layout.

[file]-[New report Group] in the report tool

Introduce the report component as shown in the following figure

3. The report component layout is shown in the following figure

Ps: the layout here needs to control the merging of cells, the adaptive mode of components, and the width and height of each component module as needed.

Then (step 3), set up the linkage between components.

That is, "Click on the corresponding area in the map, and the right dashboard and column chart will display the data values for that area."

1. Open the map component report and add the hyperlink drillthrough operation code at the end of the js code, as shown in the following figure

Note: in this example, the city is passed on.

two。 Open the dashboard component report, add parameters, receive the parameter values passed by the map component, and filter the data based on the parameter values.

Two changes need to be made in this step:

2.1 define report parameters, as shown in the following figure:

Among them

The parameter arg1 is a normal parameter, which is responsible for receiving the city passed by the map component.

Parameter arg2 is a dynamic parameter, which is responsible for matching the corresponding region according to the city of arg1 for subsequent data filtering. The expression is as follows:

If (@ arg1== "Shandong" | | @ arg1== "Jiangsu" | | @ arg1== "Anhui" | | @ arg1== "Zhejiang" | | @ arg1== "Fujian" | @ arg1== "Shanghai", "East China", @ arg1== "Guangdong" | @ arg1== "Guangxi" | @ arg1== "Hainan", "South China", @ arg1== "Hubei" | | @ arg1== "Hunan" | @ arg1== "Henan" | | @ arg1== "Jiangxi", "Central China" @ arg1== "Beijing" | | @ arg1== "Tianjin" | | @ arg1== "Hebei" | | @ arg1== "Shanxi | | @ arg1==" Inner Mongolia "," North China ", @ arg1==" Ningxia "| | @ arg1==" Xinjiang "| @ arg1==" Qinghai "| | @ arg1==" Shaanxi "| @ arg1==" Gansu "," Northwest ", @ arg1==" Sichuan "| @ arg1==" Yunnan "| @ arg1==" Guizhou "| | @ arg1==" Xizang "| | @ arg1==" Chongqing "," southwest "| @ arg1== "Liaoning" | | @ arg1== "Jilin" | | @ arg1== "Heilongjiang", "Northeast", @ arg1== "Taiwan" | | @ arg1== "Hong Kong" | | @ arg1== "Macao", "Taiwan, Hong Kong and Macao")

2.2 define dataset parameters, as shown in the following figure:

After the completion of these operations, save, release, large screen linkage to achieve perfect!

Note: the link settings of the column chart and the map are the same as above.

[technical points]

The realization method of linkage between large screen components:

MyChart.on ('click',function (param) {dashboardLink (' board.jsp?board= linkage component report. Rpx& parameter name ='+ parameter value +', 'item2');})

Big data on the large screen report components of the interaction between what is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.