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

This article mainly explains "how to use echarts to draw a map in the report tool". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use echarts to make maps in the reporting tool.

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.

At this point, I believe you have a deeper understanding of "how to use echarts to draw maps in the reporting tool". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.