It is a common form of visual chart to display regional data in public facility management, transportation, telecommunications, urban construction, energy, electric power, agriculture and other national economy-related application systems. In the past, if map-related Information needs to be displayed in report application system, developers may think of GIS(Geographic Information Software) at the first time. However, GIS system is large, and developers need to define various tasks to be performed in GIS. Develop handlers accordingly. Skilled operators even have to overcome the shortcomings of GIS software. In fact, if you just want to make a map to display data, there is no need to use such a big knife oh!

Now echarts this little whale map data rendering can help us easily make map data rendering, and the Rundry report will be echarts script integrated into the designer, according to the category of selected map template to do, by setting a few parameters, a data map is easily completed.

Let’s take a look at some of the built-in Echarts map effects.

What do you say? Isn’t that cool? Let’s take a look at another example to see if such a cool map requires such complicated steps…

1. Data preparation

Connect data sources, create new reports, and add data sets. Regardless of how the dataset was obtained, the final collated data should be in the following format. Ha ha, don’t worry, the field name can be different yo.

Note: in the second field, the name of the city and the name of the province must not appear the words of provinces and cities, for example: Beijing, do not write Beijing; Heilongjiang, do not write Heilongjiang, otherwise, the data of the corresponding provinces and cities in the statistical map cannot correspond.

2. Add the Echarts chart template to the cell.

(1) Select JS template of statistical graph

Select the cell to be set as a statistical chart, click the menu item “Report – Third-party Graphics”, or right click “Menu-third-party Graphics”, click open template button in the graphics editing window, and directly point to [installation root directory] /chart directory. Users can also switch to the template storage path by themselves.

(2) Set the parameters required by the statistical chart.

The parameter values in the parameter list can refer to the data set, which is a JSON string that converts the data set into a two-dimensional array through the json@a() function provided by the dry report. See the json function description in the tutorial for details.

After clicking OK, we can publish the report on the Web side and see the effect of the statistics graph.

3. Introduce JS of China map in JSP.

Echarts.jsp in demo/reportJsp directory, in this page already has Chinese JS, as shown below.

If it is a map of other provinces, it should be added in this page.

4. View the effect on the Web.

Click the IE icon when the built-in Tomcat is started, and you can see the map we made directly from the template in the browser.

Do the same for province maps and country maps. Now LET me expand and say briefly:

  • Raqsoft_180514_2 \report\ Web \webapps\demo\raqsoft\echarts3\map\ JS \province

The name of the JS file in this directory is the full name of the corresponding province. For example, Ningxia Hui Autonomous Region corresponds to “NINGXIA”. This resulted in shanxi and Shaanxi having the same name, shanxi.js being Shanxi and Shanxi1.js being Shaanxi.

  • Introduce the JS script of the corresponding province in JSP.