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

Showing the region-related data on the map is a common intuitive chart form in the application systems related to the national economy, such as public facilities management, transportation, telecommunications, urban construction, energy, electric power, agriculture and so on. In the past, if you need to display map-related information in a report application system, developers may think of GIS (Geographic Information Software geographic information software) at the first time, but the architecture of GIS is larger, which requires developers to define various tasks to be performed in GIS and develop corresponding processing programs. Skilled operators even need to overcome the shortcomings of GIS software functions. In fact, if you just want to make a map to display data, there is no need to use such a big knife!

Now echarts, a little whale, can help us make map data rendering easily, while the dry report integrates the echarts script into the designer. After selecting the map template to be done according to the category, a data map can be easily completed by setting a few parameters.

Let's first take a look at some of the built-in echarts map effects.

What do you think? isn't it cool? Let's use another example to see if such a cool map still requires that complicated steps.

1. Data preparation

Connect to data sources, create new reports, and add datasets. No matter how the dataset is obtained, the final collated data should be in the following format. Haha, don't be nervous, the field names can be different.

Note: the name of the city in the second field, the name of the province must not appear in the name of the province, for example, Beijing, do not write as Beijing; Heilongjiang, do not write as Heilongjiang Province, otherwise, there will be a situation in which the data of the corresponding provinces and cities cannot be corresponding in the statistical chart.

two。 Add the echarts statistical chart template to the cell.

(1) Select the statistical chart JS template

Select the cells that need to be set as a statistical chart, click the "report-third-party graphics" menu item, or right-click the open template button in the graphics editing window, the default will point directly to the [installation root] / chart directory, the user can also switch to the storage path of the template.

(2) set the required parameter values of the statistical chart.

The parameter values in the parameter list can refer to the dataset data, which is a json string that converts the dataset into a two-dimensional array through the json@a () function provided by the drying report. Refer to the description of the json function in the tutorial.

After clicking OK, we can publish the report on the web side to see the effect of the statistical chart.

3. Introduce the js of Chinese map into jsp.

Echarts.jsp is in the demo/reportJsp directory, and there is already a Chinese js on this page, as shown in the following figure.

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

4. View the results on Web.

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

To make the map of the province and the map of the country, the steps are the same. Now let me expand and briefly say:

The directory where the province's JS is located is: raqsoft_180514_2\ report\ web\ webapps\ demo\ raqsoft\ echarts3\ map\ js\ province.

The JS file names of the provinces in this directory are all spelled by the corresponding provinces, such as "ningxia" in Ningxia Hui Autonomous region. In this way, Shanxi and Shaanxi have the same name. Shanxi.js corresponds to Shanxi and shanxi1.js corresponds to Shaanxi.

Introduce the JS script for the corresponding province into jsp.

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.