WO2019109485A1 - 基于eCharts工具的图表制作方法、装置、设备及介质 - Google Patents

基于eCharts工具的图表制作方法、装置、设备及介质 Download PDF

Info

Publication number
WO2019109485A1
WO2019109485A1 PCT/CN2018/073733 CN2018073733W WO2019109485A1 WO 2019109485 A1 WO2019109485 A1 WO 2019109485A1 CN 2018073733 W CN2018073733 W CN 2018073733W WO 2019109485 A1 WO2019109485 A1 WO 2019109485A1
Authority
WO
WIPO (PCT)
Prior art keywords
chart
interface
original
module
package
Prior art date
Application number
PCT/CN2018/073733
Other languages
English (en)
French (fr)
Inventor
方小伟
梁博
黄度新
李磊
邓俊俊
Original Assignee
平安科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 平安科技（深圳）有限公司 filed Critical 平安科技（深圳）有限公司
Publication of WO2019109485A1 publication Critical patent/WO2019109485A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation

Definitions

  • the present application relates to the field of data processing technologies, and in particular, to a chart making method, apparatus, device, and medium based on an eCharts tool.
  • eCharts the abbreviation of Enterprise Charts, commercial-grade data charts, a pure Javascript chart library, can run smoothly on PCs and mobile devices, compatible with most current browsers (IE6/7/8/9/10/11 , chrome, firefox, Safari, etc.), the underlying reliance on the lightweight Canvas library ZRender, provides intuitive, vivid, interactive and highly customizable data visualization charts.
  • the present application provides a chart making method, device, device and medium based on the eCharts tool to solve the problem that the length and length code need to be copied when drawing a chart using the eCharts tool.
  • the present application provides a chart making method based on an eCharts tool, including:
  • the present application provides a chart making device based on an eCharts tool, including:
  • a chart configuration instruction acquisition module configured to acquire a chart configuration instruction, where the chart configuration instruction includes a current chart ID and/or a current chart name;
  • Encapsulating a module file calling module configured to invoke a package module file formed based on the eCharts tool based on the current chart ID and/or the current chart name;
  • An original chart obtaining module configured to acquire an original chart based on the package module file, and display the original chart on a chart configuration interface
  • a parameter modification instruction obtaining module configured to acquire a parameter modification instruction on the chart configuration interface
  • a target chart obtaining module configured to modify the original chart based on the parameter modification instruction, acquire a target chart, and display the target chart on the chart configuration interface.
  • the present application provides a terminal device including a memory, a processor, and computer readable instructions stored in the memory and executable on the processor, the processor executing the computer readable instructions The following steps are implemented:
  • the present application provides a computer readable medium storing computer readable instructions that, when executed by a processor, implement the following steps:
  • the chart configuration instruction is first obtained by including a current chart ID and/or a current chart name, and then based on the current chart ID and/or current
  • the name of the chart, the package module file formed by the eCharts tool is called, and the original chart is obtained based on the package module file, and the original chart is displayed on the chart configuration interface for visualization purposes; finally, the parameter modification instruction is obtained on the chart configuration interface.
  • the original chart is modified based on the parameter modification instruction to obtain and display the target chart. The process can visually display and modify the chart without prior copying the code, thereby improving the efficiency of chart production.
  • 1 is a flow chart showing a method of creating a chart based on an eCharts tool in the first embodiment.
  • FIG. 2 is another flow chart of a chart making method based on the eCharts tool in the first embodiment.
  • FIG. 3 is still another flow chart of the chart making method based on the eCharts tool in the first embodiment.
  • step S50 of FIG. 1 is a specific flow chart of step S50 of FIG. 1.
  • Fig. 5 is a schematic block diagram of a chart making apparatus based on the eCharts tool in the second embodiment.
  • Figure 6 is a schematic diagram of a terminal device in Embodiment 4.
  • FIG. 1 is a flow chart showing a chart making method based on the eCharts tool in the present embodiment.
  • the chart production method based on the eCharts tool is applied to a terminal device of a financial institution such as a bank, a securities, an insurance, or another institution, and is specifically applied in a chart making system (hereinafter referred to as a system), by calling a pre-stored package formed by the eCharts tool.
  • Module file display and modification can effectively improve the efficiency of chart production and enhance the user experience.
  • the chart making method based on the eCharts tool includes the following steps:
  • S10 Acquire a chart configuration instruction, and the chart configuration instruction includes a current chart ID and/or a current chart name.
  • the chart configuration instruction is an instruction for configuring the type of chart required by the user.
  • the current chart ID is an identifier for uniquely identifying the type of chart to be configured.
  • the current chart name is the name of the chart type you want to configure.
  • the chart configuration command input by the user may include only the current chart ID, or may include only the current chart name, or may include both the current chart ID and the current chart name.
  • the current chart ID and/or the chart type to be configured in the current chart name in the chart configuration command input by the user is defined as the target chart type.
  • the chart type includes all chart types included in the chart library in the eCharts tool.
  • S20 Call a package module file formed based on the eCharts tool based on the current chart ID and/or the current chart name.
  • the package module file is a pre-stored file formed by secondary encapsulation of the chart module in the eCharts tool.
  • the package module file includes at least one chart module, each chart module corresponding to a chart type, based on the current chart ID and/or the current chart name in the user input chart configuration instruction, calling the package module file with the current chart ID and / Or a chart module corresponding to the current chart name, which corresponds to the target chart type.
  • the original chart is an unmodified default chart determined based on the package module file.
  • the chart configuration interface is an interface for displaying and configuring charts.
  • Each chart module in the package module file includes a base chart ID and a base chart name, and the user can match the base chart ID and/or the base chart name by the current chart ID and/or the current chart name in the input chart configuration command.
  • To get the original chart corresponding to the current chart ID and/or the current chart name and display the original chart on the chart configuration interface.
  • the way to obtain the original chart is as follows: First, when the user knows the basic chart ID and/or the base chart name, the original chart ID and/or the current chart name can be directly input to obtain the original chart and Displayed on the chart configuration interface. Second, when the user does not know the basic chart ID and/or the basic chart name, the user can input the target chart type to the system, and the system will recommend several similar chart types for the user according to the target chart type input by the user.
  • the target chart type is selected among several similar chart types provided, that is, the user can input a selection instruction by clicking the corresponding similar chart type to determine the target chart type based on the selection instruction.
  • a reminder message is generated to remind the developer to load the target chart type. And send it to the developer's email address to remind the developer to develop the target chart type based on the reminder information, so that the chart making method is more practical and meets the user's needs.
  • the chart making system may use a keyword matching algorithm to obtain similar chart types corresponding to the target chart type when recommending similar chart types to the user.
  • the keyword matching algorithm includes but is not limited to the Knuth-Morris-Pratt (KMP) algorithm.
  • KMP Knuth-Morris-Pratt
  • the KMP algorithm is an improved string matching algorithm.
  • the key of the KMP algorithm is to use the information after the matching failure to minimize the number of matching between the pattern string and the main string to achieve fast matching.
  • the KMP algorithm is used to perform keyword matching on the target chart type input by the user and the original chart name stored in the server, to obtain similar chart types, saving time and improving efficiency.
  • the server is connected to the charting system to enable data transfer between the two.
  • the chart making system pre-stores a keyword information table including the original chart name as a key, and matches the target action and the keyword in the keyword information table by the KMP algorithm to determine a similar chart type.
  • the keywords of “China Map” and “World Map” can be maps.
  • the server will recommend the user by matching the keyword “map” in the pre-stored keyword information table. “China Map” and “World Map” are convenient for users to choose and use to enhance the user experience.
  • the parameter modification instruction is an instruction for changing the style of the original chart. Specifically, since the original chart is based on the default chart obtained by the package module file, the user can also modify the original chart according to his own needs. In this embodiment, in the chart configuration interface, the user can enter the parameter modification interface by clicking the “parameter modification” button, and input the parameter to be adjusted in the parameter modification interface, so that the chart making system can obtain the user input. Parameter modification instruction.
  • S50 Modify the original chart based on the parameter modification instruction, obtain the target chart, and display the target chart on the chart configuration interface.
  • the target chart is a chart obtained by the user to modify the original chart to meet the user's needs.
  • the chart configuration interface is an interface for displaying and configuring a chart.
  • the chart configuration interface is displayed. It can be understood that each original chart corresponds to at least one parameter default value, and the parameter default value in the original chart is modified based on the parameter modification instruction to obtain the target chart, and then the target chart is rendered and displayed on the chart configuration interface.
  • the package module file formed by the eCharts tool is called, and then the original chart is obtained based on the package module file, and the original chart is displayed on the chart configuration interface for visualization purposes.
  • the parameter modification instruction is obtained on the chart configuration interface, and the original chart is modified based on the parameter modification instruction to acquire and display the target chart.
  • the process can realize visual display and modify the chart without modifying the code before modification. Chart production efficiency.
  • a plurality of chart types are preset in the chart making system, so that the chart configuration command input by the user may be determined based on a plurality of chart types displayed on the chart configuration interface, so that the chart configuration instruction is The current chart ID and/or current chart name entered can better reflect the target chart type selected by the user.
  • the eCharts tool-based chart making method further includes the following steps:
  • the chart display instruction is an instruction for displaying a base chart stored in advance in the server. Specifically, the user can click the "Show Basic Chart” button to input the chart display instruction, and view the basic chart stored by the server, so that the user inputs a chart configuration instruction from the basic chart to configure the current chart ID and the instruction according to the chart. / or the current chart name to select the target chart type.
  • S112 Acquire at least one basic chart based on the chart display instruction, and the basic chart includes a basic chart ID and a base chart name.
  • the basic chart is a pre-stored chart in the server.
  • the base chart ID is an identifier for uniquely identifying the underlying chart.
  • the basic chart includes, but is not limited to, all the charts included in the chart library of the eCharts tool.
  • S113 Display at least one basic chart in a display area of the chart configuration interface.
  • the display area of the icon configuration interface is an area for displaying the basic chart.
  • the at least one basic chart acquired in step S112 is in the display area of the icon configuration interface in the form of a hierarchical list.
  • the server pre-counts the number of times each chart type is selected, and displays the chart type in which the selected number of times is ranked in the first N digits (such as the top 5 digits). If there are no chart types to be selected by the user in the chart type of the top N digits (such as the top 5 digits) selected by the selected number of times, the user can click the "Show all charts" button to view all the hidden chart types from all chart types. Get the target chart type to meet the user's needs.
  • the chart configuration interface includes at least one input box, and the user can input a chart configuration instruction in the input box, that is, input the current chart ID and/or the current chart name to obtain the chart type required by the user (ie, the target Chart type).
  • the number of input boxes may be increased. Due to limited interface resources, the configuration interface may display a preset number of input boxes in advance. When you want to add an input box, you can choose to add the batch or add one by one to reduce the interface resource occupancy and increase the loading rate.
  • the chart adding instruction may be input by clicking the chart adding button on the chart configuration interface, and the number of the use case instruction number to be added may be customized in the chart adding instruction;
  • the batch parameter is defined as 1, you can choose to add one by one to achieve the purpose of adding convenience.
  • step S10 the acquiring the chart configuration instruction specifically includes dragging and dropping a basic chart to an input box of the chart configuration interface to input a chart configuration instruction.
  • the user can drag and drop the desired basic chart in the basic chart and drag it into the corresponding input box to input the chart configuration instruction. If the user does not select a chart, the histogram will be displayed by default on the chart configuration interface.
  • the basic chart selected by the user is input into the corresponding input box by using a drag and drop method, and the operation process is simple, and the chart making efficiency is improved.
  • the chart display instruction is acquired, so that at least one basic chart acquired based on the chart display instruction is displayed in the display area of the chart configuration interface to realize the purpose of visual display; meanwhile, the user can drag and drop the basic form The chart is dragged to the input box of the chart configuration interface to input the chart configuration instructions, which is convenient to operate and enhance the user experience.
  • a package module file needs to be created for invocation.
  • the eCharts tool-based chart making method further includes step S60: pre-creating a package module file.
  • the pre-creation of the package module file specifically includes the following steps:
  • the eCharts chart library is a pre-stored chart library in the eCharts tool.
  • the chart conversion function is a function for converting data into a chart.
  • the eCharts chart library includes but is not limited to bar2 bar chart, barPu step waterfall chart, barPie column linked pie chart, line line chart, scatter scatter chart, pie pie chart, pie2 nested ring, map map, radar radar chart, heatmap Thermal map, funnel funnel chart, funnelContrast funnel comparison chart, gauge instrument panel, gaugeData value disk, parallel parallel coordinate, wordCloud word cloud, graph relationship diagram, graphLes circle type relationship diagram, scatterMap map scatter, scatterLarge large-scale scatter plot, mapChina map, mapWorld map and mapMove migration map.
  • each chart conversion function includes at least one code module, and each code module includes a common attribute and/or a private attribute.
  • a common code module is a collection of common properties in all code modules, such as the background color.
  • a private code module is a collection of private properties in all code modules, such as the histogram thickness. Each code module is divided, and the code modules are divided into common attributes and private attributes to determine a common code module and a private code module.
  • common attributes include, but are not limited to, text box font size, text box font color, slider direction, title font color, title font size, and title background color.
  • Private attributes include, but are not limited to, line chart turning point shapes and histogram weights.
  • S63 Encapsulating the common code modules of all the chart conversion functions into a common class module, and configuring the original common package interface for the common class module.
  • the shared class module refers to the module obtained by encapsulating the shared code module.
  • the method corresponding to "title" in the common code module is encapsulated into a common class, that is, a common class module of title, which includes but is not limited to title.textStyle.fontSize (title font size) and backgroundColor ( Background color) and other parameter attributes.
  • the original shared encapsulation interface is an interface obtained by encapsulating the parameter attributes contained in the shared class. Specifically, a series of method declarations in the shared class module are encapsulated into a void title (int backgroundColor, inttitle.textStyle.fontSize) package to obtain the original shared encapsulation interface.
  • S64 Encapsulate the private code module of each chart conversion function into a private class module, and configure the original private package interface for the private class module.
  • the private class module refers to the module obtained by encapsulating the private code module.
  • the method corresponding to "line" in the common code module is encapsulated as a private class, that is, the private class module of the line, and the private class module of the line includes but is not limited to line.Style.Color (line graph line color) ), line.symbol (line graph inflection point graph type), line.symbolSize (line graph inflection point graph size) and other parameter properties.
  • the original private encapsulation interface is the interface obtained by encapsulating the parameter attributes contained in the private class. Specifically, a series of method declarations in the private class module are encapsulated into a void line (int line style, int line.symbolSize int line.symbol) package to obtain the original private encapsulation interface.
  • S65 Obtain a package module file based on the original shared package interface and the original private package interface.
  • the original shared package interface and the original private package interface are encapsulated, the package module file is obtained, and the package module file is encapsulated into a plug-in for calling during visual editing.
  • the code module in each chart conversion function is divided based on at least one chart conversion function in the eCharts chart library to determine a common code module and a private code module, and then all the chart conversion functions are shared.
  • the code module is packaged into a common class module, and the original shared module interface is configured for the common class module.
  • the private code module of each chart conversion function is encapsulated into a private class module, the original private package interface is configured for the private class module, and finally the package module file is obtained based on the original shared package interface and the original private package interface.
  • the process is to sub-encapsulate the chart conversion function in the eCharts chart library to obtain the original common package interface and the original private package interface, so as to reduce the number of subsequent call interfaces, and do not need to copy the length of the eCharts tool during chart production.
  • Segment code just call the package module file, the operation is simple, reduce the workload of subsequent chart production based on eCharts tool, improve the efficiency of chart production.
  • the style of the original chart can be modified according to his own needs.
  • the original chart is modified based on the parameter modification instruction, and acquiring the target chart (ie, step S50) specifically includes the following steps:
  • S51 Acquire a parameter modification instruction, where the parameter modification instruction includes at least one data source ID, a parameter attribute ID corresponding to the data source, and a parameter modification value corresponding to the parameter attribute ID.
  • the data source ID is a unique identifier for identifying the subject of the parameter.
  • the parameter attribute ID is a unique identifier for identifying the parameter attribute that the user needs to modify.
  • the parameter modification value is the value of the parameter attribute that the user needs to modify.
  • each data source corresponds to at least one parameter attribute
  • each parameter attribute corresponds to a modification box for inputting the parameter modification value, and the user can input the parameter modification value to be modified in the modification box. It can be understood that at least one data source corresponding to the original chart, at least one parameter attribute corresponding to each data source, and a modification box corresponding to each parameter attribute are displayed on the chart configuration interface.
  • the data source "title” corresponds to the parameter attributes such as the title font, the title size, and the title color.
  • the parameter attributes such as the title font, the title font size, and the title font color are displayed on the chart configuration interface. And the corresponding modification box.
  • the user can click the parameter theme (ie, the data source) to be modified in the original chart, and then display the parameter attribute corresponding to the theme and the corresponding modification box in the chart configuration interface, so that the user can modify the chart style to realize visualization.
  • the purpose of editing is to simplify the charting process and improve the efficiency of charting.
  • the data source includes, but is not limited to, a parameter theme such as a radio button, a check box, a prompt box, a slide bar, a text box, a button, and a title.
  • a parameter theme such as a radio button, a check box, a prompt box, a slide bar, a text box, a button, and a title.
  • the package module file includes an original shared package interface and an original private package interface.
  • the default value of the parameter is the pre-edited default value of the parameter corresponding to the parameter attribute ID.
  • the original shared encapsulation interface is the interface obtained by encapsulating all common attributes in each chart type. Specifically, the corresponding original common encapsulation interface is invoked by using the data source ID and the parameter attribute ID, and the parameter modification value is overwritten with the parameter default value corresponding to the parameter attribute ID in the original common encapsulation interface to obtain the acquisition target common encapsulation interface. It can be understood that the parameter default value is found through the search path “Data Source ID->Parameter Attribute ID->Parameter Default Value” and is overwritten.
  • the target common encapsulation interface is determined based on the data source ID, so that the original common encapsulation interface can be called once in the process of modifying the chart style, thereby implementing the batch modification of the icon style, reducing the number of calls, and improving the efficiency of chart production.
  • the original private encapsulation interface is an interface obtained by encapsulating all private attributes in each chart type. Specifically, the parameter modification value is overwritten with the parameter default value corresponding to the parameter attribute ID in the original private package interface to obtain the target private package interface.
  • the coverage is as follows: obtain the data source ID selected by the user and call the corresponding at least one parameter attribute and the corresponding parameter default value, and the user can directly input the parameter modification value in the modification box. Finally, the original private binding interface incoming parameters are called based on the data source ID, the parameter attribute ID, and the parameter modification value to complete the overlay.
  • the following chart conversion function is called to pass the parameter modification value to override the parameter default value corresponding to the title font size.
  • the chart conversion function is as follows: function extendoption(option, propertyPath, propertyValue), where option is the option source to be overwritten (ie, the data source ID in this embodiment), and propertyPath is the ID of the passed object (ie, this implementation)
  • the parameter attribute ID the parameter attribute ID
  • the propertyValue is the set new value (that is, the parameter modification value in this embodiment); specifically, the following code ⁇ 'title.textStyle.fontSize': 16 ⁇ is used to modify the title font size to 16 .
  • S54 Modify the original chart based on the target common package interface and/or the target private package interface, obtain the target chart, and display the target chart on the chart configuration interface.
  • the target chart is obtained in the following three ways: First, if the parameter attribute to be modified by the user has a corresponding target common package interface and no corresponding target private package interface, the target common package interface needs to be called to the parameter in the original chart. The default value is overridden to get the target chart. Second, if the parameter attribute to be modified by the user has a corresponding target private package interface and no corresponding target common package interface, the target private package interface needs to be called to overwrite the default value of the parameter in the original chart to obtain the target chart.
  • the third is that if the parameter attribute to be modified by the user has both the corresponding target common package interface and the corresponding target private package interface, the target common package interface and the target private package interface are called to overwrite the default values of the parameters in the original chart to obtain Target chart.
  • the string corresponding to the parameter modification value is converted into a json string, and the json string is converted into a json object by the Json.parse() method and passed to the package module file, so that the target chart can be rendered to make the target chart.
  • the interface is displayed on the chart configuration.
  • the json string is a string that is easy to parse and generate by machine.
  • the json object is a form that converts a json string into a key-value pair, such as ⁇ "title.textStyle.color”:""#000” ⁇ , making the code short and easy to understand.
  • the interface to be called is determined by acquiring the data source ID in the parameter modification instruction. If the data source ID corresponds to the original shared encapsulation interface, the parameter modification value is overwritten with the parameter default value corresponding to the data source ID in the original common encapsulation interface based on the data source ID and the parameter attribute ID, and the target common encapsulation interface is obtained. If the data source ID corresponds to the original private encapsulation interface, the parameter modification value is overwritten with the parameter default value corresponding to the data source ID in the original private encapsulation interface based on the data source ID and the parameter attribute ID, and the target private encapsulation interface is obtained.
  • the parameter modification value is overwritten based on the data source ID and the parameter attribute ID respectively, and the parameter default value corresponding to the data source ID in the original common encapsulation interface is overwritten.
  • the original chart is modified based on the target common package interface and/or the target private package interface to obtain the target chart for visual editing and to improve the efficiency of chart production. In the process of obtaining the target chart, the original chart is modified by calling the target common package interface and/or the target private package interface, and the modification can be completed without repeatedly calling the interface, reducing the number of calls and increasing the program running rate. Improve rendering speed.
  • FIG. 5 is a schematic block diagram showing an eCharts tool-based chart making apparatus corresponding to the eCharts tool-based chart making method in the first embodiment.
  • the eCharts tool-based charting apparatus includes a chart configuration instruction acquisition module 10, a package module file calling module 20, an original chart acquisition module 30, a parameter modification instruction acquisition module 40, and a target chart acquisition module 50.
  • the implementation functions of the chart configuration instruction acquisition module 10, the package module file calling module 20, the original chart acquisition module 30, the parameter modification instruction acquisition module 40, and the target chart acquisition module 50 correspond to the eCharts tool-based chart creation method in the embodiment.
  • the steps are one-to-one correspondence, and the details are not described in detail in order to avoid redundancy.
  • the chart configuration instruction acquisition module 10 is configured to acquire a chart configuration instruction, and the chart configuration instruction includes a current chart ID and/or a current chart name.
  • the package module file invoking module 20 is configured to invoke a package module file formed based on the eCharts tool based on the current chart ID and/or the current chart name.
  • the original chart acquisition module 30 is configured to acquire the original chart based on the package module file and display the original chart on the chart configuration interface.
  • the parameter modification instruction acquisition module 40 is configured to acquire a parameter modification instruction on the chart configuration interface.
  • the target chart obtaining module 50 is configured to modify the original chart based on the parameter modification instruction, obtain the target chart, and display the target chart on the chart configuration interface.
  • the eCharts tool-based chart making apparatus further includes a chart display instruction acquiring unit 111, a base chart obtaining unit 112, and a base chart display unit 113.
  • the chart display instruction unit 111 is configured to acquire a chart display instruction.
  • the basic chart obtaining unit 112 is configured to acquire at least one basic chart based on the chart display instruction, and the basic chart includes a basic chart ID and a basic chart name.
  • the basic chart display unit 113 is configured to display at least one basic chart in a display area of the chart configuration interface.
  • the chart configuration instruction acquisition module 10 is configured to drag and drop a basic chart to an input box of the chart configuration interface by using a drag and drop method to input a chart configuration instruction.
  • the eCharts tool-based charting device further includes a package module file creation module 60 for pre-creating the package module file.
  • the package module file creation module 60 specifically includes an eCharts chart library acquisition unit 61, a code module determination unit 62, an original shared package interface configuration unit 63, an original private package interface configuration unit 64, and a package module file creation unit 65.
  • the eCharts chart library obtaining unit 61 is configured to acquire an eCharts chart library, and the eCharts chart library includes at least one chart conversion function.
  • the code module determining unit 62 is configured to divide the code modules in each chart conversion function to determine a common code module and a private code module.
  • the original shared package interface configuration unit 63 is configured to encapsulate the common code modules of all the chart conversion functions into a common class module, and configure the original common package interface for the common class module.
  • the original private package interface configuration unit 64 is configured to encapsulate the private code module of each chart conversion function into a private class module, and configure the original private package interface for the private class module.
  • the package module file creation unit 65 is configured to obtain the package module file based on the original shared package interface and the original private package interface.
  • the target chart acquisition module 50 includes a parameter modification instruction acquisition unit 51, a target common package interface acquisition unit 52, a target private package interface acquisition unit 53, and a target chart acquisition unit 54.
  • the parameter modification instruction acquiring unit 51 is configured to acquire a parameter modification instruction, where the parameter modification instruction includes at least one data source ID, a parameter attribute ID corresponding to the data source, and a parameter modification value corresponding to the parameter attribute ID.
  • the target shared encapsulation interface obtaining unit 52 is configured to: if the data source ID corresponds to the original common encapsulation interface, overwrite the parameter modification value with the parameter default value corresponding to the parameter attribute ID in the original common encapsulation interface, according to the data source ID and the parameter attribute ID, Get the target common package interface.
  • the target private encapsulation interface obtaining unit 53 is configured to: if the data source ID corresponds to the original private encapsulation interface, overwrite the parameter modification value with the default value of the parameter corresponding to the parameter attribute ID in the private encapsulation interface based on the data source ID and the parameter attribute ID.
  • Target private encapsulation interface if the data source ID corresponds to the original private encapsulation interface, overwrite the parameter modification value with the default value of the parameter corresponding to the parameter attribute ID in the private encapsulation interface based on the data source ID and the parameter attribute ID.
  • the target chart obtaining unit 54 is configured to modify the original chart based on the target common package interface and/or the target private package interface to obtain a target chart.
  • the embodiment provides a computer readable storage medium on which computer readable instructions are stored, and when the computer readable instructions are executed by the processor, the eCharts tool-based chart making method in Embodiment 1 is implemented to avoid Repeat, no longer repeat them here.
  • the computer readable instructions are executed by the processor, the functions of the modules/units in the eCharts tool-based charting device in Embodiment 2 are implemented. To avoid repetition, details are not described herein again.
  • FIG. 6 is a schematic diagram of a terminal device according to an embodiment of the present application.
  • the terminal device 100 of this embodiment includes a processor 101, a memory 102, and computer readable instructions 103 stored in the memory 102 and executable on the processor 101.
  • the processor 101 executes the steps of the eCharts tool-based charting method in Embodiment 1 when the computer readable instructions 103 are executed, such as steps S10 to S50 shown in FIG.
  • each module/unit in each of the above eCharts tool-based chart making apparatuses are implemented, for example, the chart configuration instruction acquiring module 10, the package module file calling module 20, and the original The functions of the chart acquisition module 30, the parameter modification instruction acquisition module 40, and the target chart acquisition module 50.
  • computer readable instructions 103 may be partitioned into one or more modules/units, one or more modules/units being stored in memory 102 and executed by processor 101 to complete the application.
  • the one or more modules/units may be an instruction segment of a series of computer readable instructions 103 capable of performing a particular function for describing the execution of computer readable instructions 103 in the terminal device 100.
  • the terminal device 100 can be a computing device such as a desktop computer, a notebook, a palmtop computer, and a cloud server.
  • the terminal device may include, but is not limited to, the processor 101 and the memory 102. It will be understood by those skilled in the art that FIG. 6 is only an example of the terminal device 100, and does not constitute a limitation of the terminal device 100, and may include more or less components than those illustrated, or combine some components, or different components.
  • the terminal device may further include an input/output device, a network access device, a bus, and the like.
  • the processor 101 may be a central processing unit (CPU), or may be other general-purpose processors, a digital signal processor (DSP), an application specific integrated circuit (ASIC), Field-Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.
  • the general purpose processor may be a microprocessor or the processor or any conventional processor or the like.
  • the memory 102 may be an internal storage unit of the terminal device 100, such as a hard disk or a memory of the terminal device 100.
  • the memory 102 may also be an external storage device of the terminal device 100, such as a plug-in hard disk equipped on the terminal device 100, a smart memory card (SMC), a Secure Digital (SD) card, and a flash memory card (Flash). Card) and so on.
  • the memory 102 may also include both an internal storage unit of the terminal device 100 and an external storage device.
  • the memory 102 is used to store computer readable instructions 103 and other programs and data required by the terminal device.
  • the memory 102 can also be used to temporarily store data that has been or will be output.
  • each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.
  • the above integrated unit can be implemented in the form of hardware or in the form of a software functional unit.
  • the integrated modules/units if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium.
  • the present application implements all or part of the processes in the foregoing embodiments, and may also be implemented by computer readable instructions, which may be stored in a computer readable storage medium.
  • the computer readable instructions when executed by a processor, may implement the steps of the various method embodiments described above.
  • the computer readable instructions comprise computer readable instruction code, which may be in the form of source code, an object code form, an executable file or some intermediate form or the like.
  • the computer readable medium can include any entity or device capable of carrying the computer readable instruction code, a recording medium, a USB flash drive, a removable hard drive, a magnetic disk, an optical disk, a computer memory, a read only memory (ROM, Read-Only) Memory), random access memory (RAM), electrical carrier signals, telecommunications signals, and software distribution media.
  • a recording medium a USB flash drive
  • a removable hard drive a magnetic disk, an optical disk
  • a computer memory a read only memory (ROM, Read-Only) Memory
  • RAM random access memory

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开一种基于eCharts工具的图表制作方法、装置、设备及介质。该基于eCharts工具的图表制作方法包括：获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面显示；在所述图表配置界面上，获取参数修改指令；基于所述参数修改指令对所述原始图表进行修改，获取目标图表。该基于eCharts工具的图表制作方法，可实现了可视化编辑的目的，无需用户更改代码即可制作图表，提高图表制作效率，提升用户体验。

Description

基于eCharts工具的图表制作方法、装置、设备及介质
本专利申请以2017年12月8日提交的申请号为201711291906.3，名称为“基于eCharts工具的图表制作方法、装置、设备及介质”的中国发明专利申请为基础，并要求其优先权。
技术领域
本申请涉及数据处理技术领域，尤其涉及一种基于eCharts工具的图表制作方法、装置、设备及介质。
背景技术
eCharts，即Enterprise Charts的缩写，商业级数据图表，一个纯Javascript的图表库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器(IE6/7/8/9/10/11，chrome，firefox，Safari等)，底层依赖轻量级的Canvas类库ZRender，可提供直观、生动、可交互和可高度个性化定制的数据可视化图表。
目前使用eCharts工具时，需要从eCharts官网上拷贝一长段代码，并基于这一长段代码进行画图。在基于eCharts工具画不同图表甚至同样是某一个图表时，只要数据不一样，都需要拷贝长段代码，导致任务繁重，且图表制作效率低的问题。同时，目前eCharts工具不能可视化编辑所需图表样式，导致不能满足用户日益渐增的需求。
发明内容
本申请提供一种基于eCharts工具的图表制作方法、装置、设备及介质，以解决目前使用eCharts工具画图表时需要拷贝长短代码的问题。
第一方面，本申请提供一种基于eCharts工具的图表制作方法，包括：
获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
在所述图表配置界面上，获取参数修改指令；
基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
第二方面，本申请提供一种基于eCharts工具的图表制作装置，包括：
图表配置指令获取模块，用于获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
封装模块文件调用模块，用于基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
原始图表获取模块，用于基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
参数修改指令获取模块，用于在所述图表配置界面上，获取参数修改指令；
目标图表获取模块，用于基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
第三方面，本申请提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如下步骤：
获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
在所述图表配置界面上，获取参数修改指令；
基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
第四方面，本申请提供一种计算机可读介质，所述计算机可读介质存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如下步骤：
获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
在所述图表配置界面上，获取参数修改指令；
基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
本申请提供的基于eCharts工具的图表制作方法、装置、设备及介质中，通过先获取图表配置指令，该图表配置指令包括当前图表ID和/或当前图表名称，然后基于当前图表ID和/或当前图表名称，调用基于eCharts工具形成的封装模块文件，再基于封装模块文件获取原始图表，并将原始图表在图表配置界面显示，以实现可视化的目的；最后，在图表配置界面上获取参数修改指令，并基于参数修改指令对原始图表进行修改，获取并显示目标图表，该过程无需预先复制代码再进行修改，即可实现可视化显示和修改图表，提高图表制作效率。
附图说明
为了更清楚地说明本申请的技术方案，下面将对本申请的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是实施例1中基于eCharts工具的图表制作方法的一流程图。
图2是实施例1中基于eCharts工具的图表制作方法的另一流程图。
图3是实施例1中基于eCharts工具的图表制作方法的又一流程图。
图4是图1中步骤S50的一具体流程图。
图5是实施例2中基于eCharts工具的图表制作装置的一原理框图。
图6是实施例4中终端设备的一示意图。
具体实施方式
下面将结合本申请中的附图，对本申请中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
实施例1
图1示出本实施例中基于eCharts工具的图表制作方法的流程图。该基于eCharts工具的图表制作方法应用在银行、证券、保险等金融机构或者其他机构的终端设备中，具体应用在图表制作系统(以下简称系统)中，通过调用系统预存的基于eCharts工具形成的封装模块文件进行图表显示和修改，可有效提高图表制作的效率，增强用户体验。如图 1所示，该基于eCharts工具的图表制作方法包括如下步骤：
S10：获取图表配置指令，图表配置指令包括当前图表ID和/或当前图表名称。
其中，图表配置指令是用于配置用户所需图表类型的指令。当前图表ID是用于唯一识别所要配置的图表类型的标识。当前图表名称是所要配置的图表类型的名称。用户输入的图表配置指令中可以只包括当前图表ID，也可以只包括当前图表名称，或者可以同时包括当前图表ID和当前图表名称。本实施例中，将用户输入的图表配置指令中当前图表ID和/或当前图表名称所要配置的图表类型定义为目标图表类型。
例如，当用户输入“pie(饼图)”时，“pie”则代表当前图表ID，“饼图”代表当前图表名称，用户可通过输入“pie”和/或“饼图”来获取所要配置的图表类型(以下简称为目标图表类型)，方便使用。本实施例中，图表类型包括eCharts工具中的图表库所包含的所有图表类型。
S20：基于当前图表ID和/或当前图表名称，调用基于eCharts工具形成的封装模块文件。
其中，封装模块文件是预先存储的对eCharts工具中的图表模块进行二次封装后所形成的文件。具体地，封装模块文件包括至少一个图表模块，每一图表模块对应一图表类型，基于用户输入图表配置指令中的当前图表ID和/或当前图表名称，调用封装模块文件中与当前图表ID和/或当前图表名称相对应的图表模块，该图表模块对应于目标图表类型。
S30：基于封装模块文件获取原始图表，并将原始图表在图表配置界面上显示。
其中，原始图表是基于封装模块文件所确定的未经修改的默认图表。图表配置界面是用于对图表进行显示和配置的界面。封装模块文件中的每一图表模块包括基础图表ID和基础图表名称，用户可通过输入的图表配置指令中的当前图表ID和/或当前图表名称，与基础图表ID和/或基础图表名称进行匹配，以获取与当前图表ID和/或当前图表名称相对应的原始图表，并在图表配置界面上显示该原始图表。
具体地，获取原始图表的方式有如下两种情况：一是当用户知道基础图表ID和/或基础图表名称时，可通过直接输入当前图表ID和/或当前图表名称，以获取原始图表并在图表配置界面上显示。二是当用户不知道基础图表ID和/或基础图表名称时，用户可以向系统输入目标图表类型，系统会根据用户所输入的目标图表类型，为用户推荐若干相似图表类型，以供用户从所提供的若干相似图表类型中选择目标图表类型，即用户可通过点击相应的相似图表类型而输入选择指令，以便基于该选择指令确定目标图表类型。进一步地，若系统所推荐的若干相似图表类型没有用户所需要的目标图表类型(即用户没有输入选择 指令选择其中一个相似图表类型)时，则会生成提醒开发人员加载该目标图表类型的提醒信息，并发送给开发人员的电子邮箱,以提醒开发人员基于提醒信息进行目标图表类型开发，从而使得该图表制作方法更具有实用性，满足用户的需求。
进一步地，图表制作系统在给用户推荐相似图表类型时，可以采用关键词匹配算法，获取与目标图表类型相对应的相似图表类型。其中，关键词匹配算法包括但不限于克努特-莫里斯-普拉特(Knuth-Morris-Pratt，以下简称KMP)算法。具体地，KMP算法是一种改进的字符串匹配算法，KMP算法的关键是利用匹配失败后的信息，尽量减少模式串与主串的匹配次数以达到快速匹配的目的。本实施例中，选用KMP算法对用户所输入的目标图表类型和服务器中存储的原始图表名称进行关键词匹配，获取相似图表类型，节省时间，提高效率。该服务器与图表制作系统相连，可实现两者的数据传输。
具体地，图表制作系统会预先存储包含将原始图表名称作为关键字所形成的关键字信息表，通过KMP算法匹配目标动作与关键字信息表中的关键字，以确定相似图表类型。例如“中国地图”和“世界地图”的关键字可以为地图，当用户输入“地图”时，服务器会在预先存储的关键字信息表中，通过匹配到关键字“地图”，而为用户推荐“中国地图”和“世界地图”，方便用户进行选择使用，提升用户体验。
S40：在图表配置界面上，获取参数修改指令。
参数修改指令是用于对原始图表的样式进行更改的指令。具体地，由于原始图表是基于的封装模块文件所获取到的默认图表，用户也可根据自己的需求对原始图表进行修改。本实施例中，在图表配置界面上中，用户可通过点击“参数修改”按钮而进入参数修改界面，并在该参数修改界面输入所需调节的参数，以使图表制作系统可获取用户输入的参数修改指令。
S50：基于参数修改指令对原始图表进行修改，获取目标图表，并将目标图表在图表配置界面上显示。
其中，目标图表是用户对原始图表进行修改后所获取到的满足用户需求的图表。图表配置界面是用于对图表进行显示和配置的界面，当用户点击图表配置按钮而输入的图表配置指令时，并基于图表配置指令所跳转到的界面为图表配置界面。可以理解地，每一原始图表对应至少一个参数默认值，基于参数修改指令对原始图表中的参数默认值进行修改，以获取目标图表，再将目标图表进行渲染并在图表配置上界面显示。
本实施例中，基于当前图表ID和/或当前图表名称，调用基于eCharts工具形成的封装模块文件，再基于封装模块文件获取原始图表，并将原始图表在图表配置界面显示，以 实现可视化的目的；最后，在图表配置界面上获取参数修改指令，并基于参数修改指令对原始图表进行修改，获取并显示目标图表，该过程无需预先复制代码再进行修改，即可实现可视化显示和修改图表，提高图表制作效率。
在一具体实施方式中，图表制作系统中预先设置有多种图表类型，使得用户输入的图表配置指令可以是基于图表配置界面上显示的多种图表类型进行选择后确定的，使得图表配置指令中输入的当前图表ID和/或当前图表名称更能体现用户所选择的目标图表类型。如图2所示，步骤S10之前，该基于eCharts工具的图表制作方法，还包括如下步骤：
S111：获取图表显示指令。
其中，图表显示指令是用于显示服务器中预先存储的基础图表的指令。具体地，用户可点击“显示基础图表”按钮而输入该图表显示指令，查看服务器所存储的基础图表，以便用户从基础图表中，输入图表配置指令，以根据图表配置指令中的当前图表ID和/或当前图表名称选择目标图表类型。
S112：基于图表显示指令，获取至少一个基础图表，基础图表包括基础图表ID和基础图表名称。
其中，基础图表是服务器中预先存储的图表。基础图表ID是用于唯一识别基础图表的标识。本实施例中，该基础图表包括但不限于eCharts工具的图表库所包含的所有图表。
S113：将至少一个基础图表在图表配置界面的显示区域显示。
其中，图标配置界面的显示区域是用于显示基础图表的区域。具体地，将步骤S112获取到的至少一个基础图表以分级列表的形式在图标配置界面的显示区域。进一步地，服务器会预先统计每一图表类型被选择次数，并显示被选择次数排名在前N位(如前5位)的图表类型。若被选择次数排名前N位(如前5位)的图表类型中，没有用户所要选择的图表类型，则用户可点击“显示全部图表”按钮以查看隐藏的所有图表类型，以从所有图表类型中获取目标图表类型，满足用户的需求。
本实施例中，图表配置界面包括至少一个输入框，用户可通过在该输入框中输入图表配置指令，即输入当前图表ID和/或当前图表名称，以获取用户所需的图表类型(即目标图表类型)。本实施例中，当用户进行批量制作图表时，可以增加输入框的数量，由于界面资源有限，该配置界面会预先显示预设数量的输入框。当用户想要添加输入框时，可以选择批量添加方式或者逐条添加方式，降低界面资源占有率，提升加载速率。具体地，当用户添加输入框时，可向在图表配置界面上点击图表添加按钮而输入图表添加指令，在图表添加指令中可自定义输入所要添加的用例指令编号的数量；如选择批量添加方式时，可 以自定义批量参数，当批量参数定义为1时，即选择逐条添加方式，以达到添加便捷的目的。
进一步地，步骤S10中，即获取图表配置指令具体包括：采用拖拽方式将一基础图表拖拽到图表配置界面的输入框，以输入图表配置指令。
具体地，用户可以采用拖拽方式在基础图表中选取所需的基础图表，将其拖拽到对应的输入框中，以输入图表配置指令。其中，若用户没有选择图表时，则会在图表配置界面上默认显示柱状图。本实施例中，采用拖拽方式将用户选取到的基础图表输入到对应的输入框中，该操作过程简单，提高了图表制作效率。
本实施例中，通过获取图表显示指令，以使基于图表显示指令获取到的至少一个基础图表在图表配置界面的显示区域显示，以实现可视化显示的目的；同时，用户可通过拖拽方式将基础图表拖拽到图表配置界面的输入框，以输入图表配置指令，操作便捷，提升用户体验。
在另一具体实施方式中，在进行该基于eCharts工具的图表制作方法之前，需要创建封装模块文件以供调用。如图3所示，该基于eCharts工具的图表制作方法，还包括步骤S60：预先创建封装模块文件。预先创建封装模块文件具体包括如下步骤：
S61：获取eCharts图表库，eCharts图表库包括至少一个图表转换函数。
其中，eCharts图表库是eCharts工具中预先存储好的图表库。图表转换函数是用于将数据转换为图表的函数。该eCharts图表库包括但不限于bar2条形图、barPu阶梯瀑布图、barPie柱状联动饼图、line折线图、scatter散点图、pie饼图、pie2嵌套环形、map地图、radar雷达图、heatmap热力图、funnel漏斗图、funnelContrast漏斗对比图、gauge仪表盘、gaugeData数值盘、parallel平行坐标、wordCloud词云、graph关系图、graphLes圆圈型关系图、scatterMap地图散点、scatterLarge大规模散点图、mapChina中国地图、mapWorld世界地图和mapMove迁徙地图。
S62：对每一图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块。
其中，每一图表转换函数中包括至少一个代码模块，每一代码模块包括共有属性和/或私有属性。共有代码模块是所有代码模块中的共有属性的集合，例如背景色。私有代码模块是所有代码模块中的私有属性的集合，例如柱状图粗细。对每一代码模块进行划分，将代码模块按共有属性和私有属性进行划分，以确定共有代码模块和私有代码模块。
例如在line折线图中，共有属性包括但不限于文本框字体大小、文本框字体颜色、 滑动条方向、标题字体颜色、标题字体大小和标题背景色等。私有属性包括但不限于折线图转折点形状和柱状图粗细。
S63：将所有图表转换函数的共有代码模块封装成共有类模块，给共有类模块配置原始共有封装接口。
共有类模块是指将共有代码模块进行封装所获取到的模块。如将共有代码模块中的“title(标题)”所对应的方法封装为共有类，即title的共有类模块，该共有类模块包括但不限于title.textStyle.fontSize(标题字体大小)和backgroundColor(背景色)等参数属性。原始共有封装接口是将共有类中所包含的参数属性进行封装所得到的接口。具体地，将共有类模块中的一系列方法声明形如void title(int backgroundColor，inttitle.textStyle.fontSize)封装以获取原始共有封装接口。
S64：将每一图表转换函数的私有代码模块封装成私有类模块，给私有类模块配置原始私有封装接口。
其中，私有类模块是指将私有代码模块中进行封装所获取到的模块。例如将共有代码模块中的“line(折线图)”所对应的方法封装为私有类，即line的私有类模块，该line的私有类模块包括但不限于line.Style.Color(折线图线条颜色)、line.symbol(折线图拐点图形类型)、line.symbolSize(折线图拐点图形大小)等参数属性。原始私有封装接口是将私有类中所包含的参数属性进行封装所得到的接口。具体地，将私有类模块中的一系列方法声明形如void line(int linestyle，int line.symbolSize int line.symbol)封装以获取原始私有封装接口。
S65：基于原始共有封装接口和原始私有封装接口，获取封装模块文件。
具体地，将原始共有封装接口和原始私有封装接口进行封装，获取封装模块文件，并将该封装模块文件封装进插件，以供可视化编辑时进行调用。
本实施例中，通过基于eCharts图表库中的至少一个图表转换函数，并对每一图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块，然后将所有图表转换函数的共有代码模块封装成共有类模块，给共有类模块配置原始共有封装接口。将每一图表转换函数的私有代码模块封装成私有类模块，给私有类模块配置原始私有封装接口，最后基于原始共有封装接口和原始私有封装接口，获取封装模块文件。该过程通过对eCharts图表库中的图表转换函数进行二次封装，以获取原始共有封装接口和原始私有封装接口，以减少后续调用接口的次数，并且在图表制作时，无需拷贝eCharts工具中的长段代码，只需调用封装模块文件即可，操作简单，减轻后续基于eCharts工具进行图表制 作的工作量，提高图表制作效率。
在一具体实施方式中，在用户对原始图表的样式不满意时，可根据自己的需求对原始图表的样式进行修改。如图4所示，基于参数修改指令对原始图表进行修改，获取目标图表(即步骤S50)具体包括如下步骤：
S51：获取参数修改指令，参数修改指令包括至少一个数据源ID、与数据源对应的参数属性ID和与参数属性ID对应的参数修改值。
其中，数据源ID是用于识别参数主题的唯一标识。参数属性ID是用于识别用户所需修改的参数属性的唯一标识。参数修改值是用户所需修改的参数属性的值。具体地，每一数据源对应至少一个参数属性，每一参数属性对应一用于输入参数修改值的修改框，用户可在修改框中输入所需修改的参数修改值。可以理解地，在图表配置界面上显示原始图表所对应的至少一个数据源，与每一数据源对应的至少一个参数属性以及与每一参数属性对应的修改框。例如数据源“标题”对应标题字体、标题大小和标题颜色等参数属性，当用户点击原始图表中的标题区域时，会在图表配置界面上显示标题字体、标题字体大小和标题字体颜色等参数属性和对应的修改框。
具体地，用户可点击原始图表中所要修改的参数主题(即数据源)，即可在图表配置界面中显示与该主题对应的参数属性和对应的修改框，以供用户修改图表样式，实现可视化编辑的目的，简化图表制作流程，提高图表制作效率。
本实施例中，数据源包括但不限于单选框、复选框、提示框、滑动条、文本框、按钮和标题等参数主题。本实施例中，通过可视化编辑图表的方式，以满足用户日益渐增的需求，方便用户操作，提升用户体验。
S52：若数据源ID对应原始共有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖原始共有封装接口中与参数属性ID相对应的参数默认值，获取目标共有封装接口。
其中，封装模块文件包括原始共有封装接口和原始私有封装接口。参数默认值是预先编辑好的与参数属性ID对应的参数默认值。原始共有封装接口是各图表类型中对所有共有属性进行封装后得到的接口。具体地，通过数据源ID和参数属性ID调用对应的原始共有封装接口，并将参数修改值覆盖原始共有封装接口中与参数属性ID相对应的参数默认值，以获取获取目标共有封装接口。可以理解地，通过“数据源ID->参数属性ID->参数默认值”这一查找路径查找到参数默认值，并对其进行覆盖。本实施例中，基于数据源ID确定目标共有封装接口，以使图表样式修改的过程中只需调用一次原始共有封装接口即可 实现批量更修改图标样式，减少调用次数，提高图表制作效率。
S53：若数据源ID对应原始私有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖原始私有封装接口中与参数属性ID相对应的参数默认值，获取目标私有封装接口。
其中，原始私有封装接口是各图表类型中对所有私有属性进行封装后得到的接口。具体地，将参数修改值覆盖原始私有封装接口中与参数属性ID相对应的参数默认值，以获取目标私有封装接口。该覆盖方式如下：获取用户所选择的数据源ID并调用对应的至少一个参数属性和对应的参数默认值，用户可在修改框中直接输入参数修改值。最后，基于数据源ID、参数属性ID和参数修改值调用原始私有封接口传入参数，即可完成覆盖。
具体地，例如:在参数属性“标题字体大小”中，输入16。则会调用如下图表转换函数传入参数修改值覆盖与标题字体大小对应的参数默认值。该图表转换函数如下所示function extendoption(option，propertyPath，propertyValue)，其中option为要被覆盖的option源(即本实施例中的数据源ID)，propertyPath为传入的对象的ID(即本实施例中的参数属性ID)，propertyValue为设置的新值(即本实施例中的参数修改值)；具体通过以下代码{‘title.textStyle.fontSize’：16}实现修改标题字体大小为16的目的。
S54：基于目标共有封装接口和/或目标私有封装接口对原始图表进行修改，获取目标图表，并将目标图表在图表配置上界面显示。
具体地，获取目标图表有如下三种方式：一是若用户所要修改的参数属性有对应的目标共有封装接口而没有对应的目标私有封装接口，则需调用目标共有封装接口对原始图表中的参数默认值进行覆盖，以获取目标图表。二是若用户所要修改的参数属性有对应的目标私有封装接口而没有对应的目标共有封装接口，则需调用目标私有封装接口对原始图表中的参数默认值进行覆盖，以获取目标图表。三是若用户所要修改的参数属性既有对应的目标共有封装接口也有对应的目标私有封装接口，则需调用目标共有封装接口和目标私有封装接口对原始图表中的参数默认值进行覆盖，以获取目标图表。
具体地，参数修改值所对应字符串转换为json字符串保存，通过Json.parse()方法将json字符串转化为json对象并传入封装模块文件，即可目标图表进行渲染，以使目标图表在图表配置上界面显示。json字符串是一种易于机器解析和生成的字符串，主要是以双引号将所有属性包括起来例如“{“title.textStyle.color”:"“#000”}”(代表标题字体颜色为黑色)。json对象是一种将json字符串转换为键值对的形式，例如 {“title.textStyle.color”:"“#000”}，使得代码简短易懂，容易维护。
本实施例中，通过获取参数修改指令中的数据源ID判断所要调用的接口。若数据源ID对应原始共有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖原始共有封装接口中与数据源ID相对应的参数默认值，获取目标共有封装接口。若数据源ID对应原始私有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖原始私有封装接口中与数据源ID相对应的参数默认值，获取目标私有封装接口。若两个以上的数据源ID分别对应原始共有封装接口和原始私有封装接口，则分别基于数据源ID和参数属性ID将参数修改值覆盖原始共有封装接口中与数据源ID相对应的参数默认值，获取目标共有封装接口和基于数据源ID和参数属性ID将参数修改值覆盖原始私有封装接口中与数据源ID相对应的参数默认值，获取目标私有封装接口。基于目标共有封装接口和/或目标私有封装接口对原始图表进行修改，获取目标图表，以实现可视化编辑的目的，提高图表制作效率。该获取目标图表的过程中通过调用目标共有封装接口和/或目标私有封装接口这两种接口对原始图表进行修改，无需重复调用接口即可完成修改，减少调用次数，增加了程序运行速率，以提高渲染速度。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请的实施过程构成任何限定。
实施例2
图5示出与实施例1中基于eCharts工具的图表制作方法一一对应的基于eCharts工具的图表制作装置的原理框图。如图5所示，该基于eCharts工具的图表制作装置包括图表配置指令获取模块10、封装模块文件调用模块20、原始图表获取模块30、参数修改指令获取模块40和目标图表获取模块50。其中，图表配置指令获取模块10、封装模块文件调用模块20、原始图表获取模块30、参数修改指令获取模块40和目标图表获取模块50的实现功能与实施例中基于eCharts工具的图表制作方法对应的步骤一一对应，为避免赘述，本实施例不一一详述。
图表配置指令获取模块10，用于获取图表配置指令，图表配置指令包括当前图表ID和/或当前图表名称。
封装模块文件调用模块20，用于基于当前图表ID和/或当前图表名称，调用基于eCharts工具形成的封装模块文件。
原始图表获取模块30，用于基于封装模块文件获取原始图表，并将原始图表在图表配置界面上显示。
参数修改指令获取模块40，用于在图表配置界面上，获取参数修改指令。
目标图表获取模块50，用于基于参数修改指令对原始图表进行修改，获取目标图表，并将目标图表在图表配置界面上显示。
优选地，该基于eCharts工具的图表制作装置还包括图表显示指令获取单元111、基础图表获取单元112和基础图表显示单元113。
图表显示指令单元111，用于获取图表显示指令。
基础图表获取单元112，用于基于图表显示指令，获取至少一个基础图表，基础图表包括基础图表ID和基础图表名称。
基础图表显示单元113，用于将至少一个基础图表在图表配置界面的显示区域显示。
优选地，图表配置指令获取模块10，用于采用拖拽方式将一基础图表拖拽到图表配置界面的输入框，以输入图表配置指令。
优选地，该基于eCharts工具的图表制作装置还包括封装模块文件创建模块60，用于预先创建封装模块文件。
封装模块文件创建模块60具体包括eCharts图表库获取单元61、代码模块确定单元62、原始共有封装接口配置单元63、原始私有封装接口配置单元64和封装模块文件创建单元65。
eCharts图表库获取单元61，用于获取eCharts图表库，eCharts图表库包括至少一个图表转换函数。
代码模块确定单元62，用于对每一图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块。
原始共有封装接口配置单元63，用于将所有图表转换函数的共有代码模块封装成共有类模块，给共有类模块配置原始共有封装接口。
原始私有封装接口配置单元64，用于将每一图表转换函数的私有代码模块封装成私有类模块，给私有类模块配置原始私有封装接口。
封装模块文件创建单元65，用于基于原始共有封装接口和原始私有封装接口，获取封装模块文件。
优选地，目标图表获取模块50包括参数修改指令获取单元51、目标共有封装接口获取单元52、目标私有封装接口获取单元53和目标图表获取单元54。
参数修改指令获取单元51，用于获取参数修改指令，参数修改指令包括至少一个数据源ID、与数据源对应的参数属性ID和与参数属性ID对应的参数修改值。
目标共有封装接口获取单元52，用于若数据源ID对应原始共有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖原始共有封装接口中与参数属性ID相对应的参数默认值，获取目标共有封装接口。
目标私有封装接口获取单元53，用于若数据源ID对应原始私有封装接口，则基于数据源ID和参数属性ID将参数修改值覆盖私有封装接口中与参数属性ID相对应的参数默认值，获取目标私有封装接口。
目标图表获取单元54，用于基于目标共有封装接口和/或所述目标私有封装接口对所述原始图表进行修改，获取目标图表。
实施例3
本实施例提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机可读指令，该计算机可读指令被处理器执行时实现实施例1中基于eCharts工具的图表制作方法，为避免重复，这里不再赘述。或者，该计算机可读指令被处理器执行时实现实施例2中基于eCharts工具的图表制作装置中各模块/单元的功能，为避免重复，这里不再赘述。
实施例4
图6是本申请一实施例提供的终端设备的示意图。如图6所示，该实施例的终端设备100包括：处理器101、存储器102以及存储在存储器102中并可在处理器101上运行的计算机可读指令103。处理器101执行计算机可读指令103时实现上述实施例1中基于eCharts工具的图表制作方法的步骤，例如图1所示的步骤S10至S50。或者，处理器101执行计算机可读指令103时实现上述各基于eCharts工具的图表制作装置中各模块/单元的功能，例如图5所示图表配置指令获取模块10、封装模块文件调用模块20、原始图表获取模块30、参数修改指令获取模块40和目标图表获取模块50的功能。
示例性的，计算机可读指令103可以被分割成一个或多个模块/单元，一个或者多个模块/单元被存储在存储器102中，并由处理器101执行，以完成本申请。一个或多个模块/单元可以是能够完成特定功能的一系列计算机可读指令103的指令段，该指令段用于描述计算机可读指令103在终端设备100中的执行过程。
终端设备100可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。终端设备可包括，但不仅限于，处理器101、存储器102。本领域技术人员可以理解，图6仅仅是终端设备100的示例，并不构成对终端设备100的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如终端设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器101可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
存储器102可以是终端设备100的内部存储单元，例如终端设备100的硬盘或内存。存储器102也可以是终端设备100的外部存储设备，例如终端设备100上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器102还可以既包括终端设备100的内部存储单元也包括外部存储设备。存储器102用于存储计算机可读指令103以及终端设备所需的其他程序和数据。存储器102还可以用于暂时地存储已经输出或者将要输出的数据。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一计算机可读存储介质中，该计算机可读指令在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机可读指令包括计算机可读指令代码，所述计算机可读指令代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机可读指令代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践， 计算机可读介质不包括是电载波信号和电信信号。
以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (20)

  1. 一种基于eCharts工具的图表制作方法，其特征在于，包括：
    获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
    基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
    基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
    在所述图表配置界面上，获取参数修改指令；
    基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
  2. 如权利要求1所述的基于eCharts工具的图表制作方法，其特征在于，在所述获取图表配置指令的步骤之前，所述基于eCharts工具的图表制作方法还包括：
    获取图表显示指令；
    基于所述图表显示指令，获取至少一个基础图表，所述基础图表包括基础图表ID和基础图表名称；
    将至少一个所述基础图表在所述图表配置界面的显示区域显示。
  3. 如权利要求1所述的基于eCharts工具的图表制作方法，其特征在于，所述获取图表配置指令，包括：
    采用拖拽方式将一所述基础图表拖拽到所述图表配置界面的输入框，以输入所述图表配置指令。
  4. 如权利要求1所述的基于eCharts工具的图表制作方法，其特征在于，所述基于所述参数修改指令对所述原始图表进行修改，获取目标图表，包括：
    获取所述参数修改指令，所述参数修改指令包括至少一个数据源ID、与所述数据源对应的参数属性ID和与所述参数属性ID对应的参数修改值；
    若所述数据源ID对应原始共有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始共有封装接口中与所述参数属性ID相对应的参数默认值，获取目标共有封装接口；
    若所述数据源ID对应原始私有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始私有封装接口中与所述参数属性ID相对应的参数默认值，获取目标私有封装接口；
    基于所述目标共有封装接口和/或所述目标私有封装接口对所述原始图表进行修改，获取目标图表。
  5. 如权利要求1所述的基于eCharts工具的图表制作方法，其特征在于，还包括：预先创建封装模块文件；
    所述预先创建所述封装模块文件的步骤，包括：
    获取eCharts图表库，所述eCharts图表库包括至少一个图表转换函数；
    对每一所述图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块；
    将所有所述图表转换函数的共有代码模块封装成共有类模块，给所述共有类模块配置原始共有封装接口；
    将每一所述图表转换函数的私有代码模块封装成私有类模块，给所述私有类模块配置原始私有封装接口；
    基于所述原始共有封装接口和所述原始私有封装接口，获取封装模块文件。
  6. 一种基于eCharts工具的图表制作装置，其特征在于，包括：
    图表配置指令获取模块，用于获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
    封装模块文件调用模块，用于基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
    原始图表获取模块，用于基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
    参数修改指令获取模块，用于在所述图表配置界面上，获取参数修改指令；
    目标图表获取模块，用于基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
  7. 如权利要求6所述的基于eCharts工具的图表制作装置，其特征在于,所述基于eCharts工具的图表制作装置还包括：
    图表显示指令单元，用于获取图表显示指令；
    基础图表获取单元，用于基于所述图表显示指令，获取至少一个基础图表，所述基础图表包括基础图表ID和基础图表名称；
    基础图表显示单元，用于将至少一个所述基础图表在所述图表配置界面的显示区域显示。
  8. 如权利要求7所述的基于eCharts工具的图表制作装置，其特征在于,基于eCharts工具的图表制作装置还包括：封装模块文件创建模块，用于预先创建封装模块文件；
    所述封装模块文件创建模块包括：
    eCharts图表库获取单元，用于获取eCharts图表库，所述eCharts图表库包括至少一个图表转换函数；
    代码模块确定单元，用于对每一所述图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块；
    原始共有封装接口配置单元，用于将所有所述图表转换函数的共有代码模块封装成共有类模块，给所述共有类模块配置原始共有封装接口；
    原始私有封装接口配置单元，用于将每一所述图表转换函数的私有代码模块封装成私有类模块，给所述私有类模块配置原始私有封装接口；
    封装模块文件创建单元，用于基于所述原始共有封装接口和所述原始私有封装接口，获取封装模块文件。
  9. 如权利要求6所述的基于eCharts工具的图表制作装置，所述图表显示指令单元包括：
    图表配置指令输入单元，用于采用拖拽方式将一所述基础图表拖拽到所述图表配置界面的输入框，以输入所述图表配置指令。
  10. 如权利要求6所述的基于eCharts工具的图表制作装置，所述目标图表获取模块包括；
    参数修改指令获取单元，用于获取所述参数修改指令，所述参数修改指令包括至少一个数据源ID、与所述数据源对应的参数属性ID和与所述参数属性ID对应的参数修改值；
    目标共有封装接口获取单元，用于若所述数据源ID对应原始共有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始共有封装接口中与所述参数属性ID相对应的参数默认值，获取目标共有封装接口；
    目标私有封装接口获取单元，用于若所述数据源ID对应原始私有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始私有封装接口中与所述参数属性ID相对应的参数默认值，获取目标私有封装接口；
    目标图表获取单元，用于基于所述目标共有封装接口和/或所述目标私有封装接口对所述原始图表进行修改，获取目标图表。
  11. 一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器 上运行的计算机可读指令，其特征在于，所述处理器执行所述计算机可读指令时实现如下步骤：
    获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
    基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
    基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
    在所述图表配置界面上，获取参数修改指令；
    基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
  12. 如权利要求11所述的终端设备，其特征在于，在所述获取图表配置指令的步骤之前，所述处理器执行所述计算机可读指令时实现如下步骤：
    获取图表显示指令；
    基于所述图表显示指令，获取至少一个基础图表，所述基础图表包括基础图表ID和基础图表名称；
    将至少一个所述基础图表在所述图表配置界面的显示区域显示。
  13. 如权利要求11所述的终端设备，其特征在于，所述获取图表配置指令，包括：
    采用拖拽方式将一所述基础图表拖拽到所述图表配置界面的输入框，以输入所述图表配置指令。
  14. 如权利要求11所述的终端设备，其特征在于，所述基于所述参数修改指令对所述原始图表进行修改，获取目标图表，包括：
    获取所述参数修改指令，所述参数修改指令包括至少一个数据源ID、与所述数据源对应的参数属性ID和与所述参数属性ID对应的参数修改值；
    若所述数据源ID对应原始共有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始共有封装接口中与所述参数属性ID相对应的参数默认值，获取目标共有封装接口；
    若所述数据源ID对应原始私有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始私有封装接口中与所述参数属性ID相对应的参数默认值，获取目标私有封装接口；
    基于所述目标共有封装接口和/或所述目标私有封装接口对所述原始图表进行修改，获取目标图表。
  15. 如权利要求11所述的终端设备，其特征在于，所述处理器执行所述计算机可读指令时还实现如下步骤：预先创建封装模块文件；
    所述预先创建所述封装模块文件的步骤，包括：
    获取eCharts图表库，所述eCharts图表库包括至少一个图表转换函数；
    对每一所述图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块；
    将所有所述图表转换函数的共有代码模块封装成共有类模块，给所述共有类模块配置原始共有封装接口；
    将每一所述图表转换函数的私有代码模块封装成私有类模块，给所述私有类模块配置原始私有封装接口；
    基于所述原始共有封装接口和所述原始私有封装接口，获取封装模块文件。
  16. 一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，其特征在于，所述计算机可读指令被处理器执行时实现如下步骤：
    获取图表配置指令，所述图表配置指令包括当前图表ID和/或当前图表名称；
    基于所述当前图表ID和/或所述当前图表名称，调用基于eCharts工具形成的封装模块文件；
    基于所述封装模块文件获取原始图表，并将所述原始图表在图表配置界面上显示；
    在所述图表配置界面上，获取参数修改指令；
    基于所述参数修改指令对所述原始图表进行修改，获取目标图表，并将所述目标图表在所述图表配置界面上显示。
  17. 如权利要求16所述的计算机可读存储介质，其特征在于，在所述获取图表配置指令的步骤之前，所述计算机可读指令被处理器执行时还实现如下步骤：
    获取图表显示指令；
    基于所述图表显示指令，获取至少一个基础图表，所述基础图表包括基础图表ID和基础图表名称；
    将至少一个所述基础图表在所述图表配置界面的显示区域显示。
  18. 如权利要求16所述的计算机可读存储介质，其特征在于，所述获取图表配置指令，包括：
    采用拖拽方式将一所述基础图表拖拽到所述图表配置界面的输入框，以输入所述图表配置指令。
  19. 如权利要求16所述的计算机可读存储介质，其特征在于，所述基于所述参数修改指令对所述原始图表进行修改，获取目标图表，包括：
    获取所述参数修改指令，所述参数修改指令包括至少一个数据源ID、与所述数据源对应的参数属性ID和与所述参数属性ID对应的参数修改值；
    若所述数据源ID对应原始共有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始共有封装接口中与所述参数属性ID相对应的参数默认值，获取目标共有封装接口；
    若所述数据源ID对应原始私有封装接口，则基于所述数据源ID和所述参数属性ID将所述参数修改值覆盖所述原始私有封装接口中与所述参数属性ID相对应的参数默认值，获取目标私有封装接口；
    基于所述目标共有封装接口和/或所述目标私有封装接口对所述原始图表进行修改，获取目标图表。
  20. 如权利要求16所述的计算机可读存储介质，其特征在于，所述计算机可读指令被处理器执行时还实现如下步骤：预先创建封装模块文件；
    所述预先创建封装模块文件的步骤，包括：
    获取eCharts图表库，所述eCharts图表库包括至少一个图表转换函数；
    对每一所述图表转换函数中的代码模块进行划分，以确定共有代码模块和私有代码模块；
    将所有所述图表转换函数的共有代码模块封装成共有类模块，给所述共有类模块配置原始共有封装接口；
    将每一所述图表转换函数的私有代码模块封装成私有类模块，给所述私有类模块配置原始私有封装接口；
    基于所述原始共有封装接口和所述原始私有封装接口，获取封装模块文件。
PCT/CN2018/073733 2017-12-08 2018-01-23 基于eCharts工具的图表制作方法、装置、设备及介质 WO2019109485A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201711291906.3 2017-12-08
CN201711291906.3A CN108228169B (zh) 2017-12-08 2017-12-08 基于eCharts工具的图表制作方法、装置、设备及介质

Publications (1)

Publication Number Publication Date
WO2019109485A1 true WO2019109485A1 (zh) 2019-06-13

Family

ID=62653972

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/073733 WO2019109485A1 (zh) 2017-12-08 2018-01-23 基于eCharts工具的图表制作方法、装置、设备及介质

Country Status (2)

Country Link
CN (1) CN108228169B (zh)
WO (1) WO2019109485A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111124372A (zh) * 2019-12-26 2020-05-08 福建福诺移动通信技术有限公司 一种简化开发图表前后端设计方法及系统
CN111176634A (zh) * 2020-01-17 2020-05-19 天阳宏业科技股份有限公司 一种可配置化可嵌入的高管视图的方法及装置
CN111178969A (zh) * 2019-12-30 2020-05-19 河南拓普计算机网络工程有限公司 市场主体迁移特征分析方法、装置、电子设备及存储介质
CN115328486A (zh) * 2022-10-17 2022-11-11 北京安盟信息技术股份有限公司 基于动态传入数据的echarts调用封装方法、装置、介质及设备

Families Citing this family (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109358851B (zh) * 2018-07-19 2021-08-31 平安科技（深圳）有限公司 图表组件的创建方法、装置及计算机可读存储介质
CN109255532A (zh) * 2018-08-28 2019-01-22 平安科技（深圳）有限公司 基于图表的产品构建方法、装置、计算机设备及存储介质
CN109634805A (zh) * 2018-11-19 2019-04-16 平安科技（深圳）有限公司 监控数据处理方法、装置、电子设备及存储介质
CN109656665A (zh) * 2018-12-20 2019-04-19 成都四方伟业软件股份有限公司 一种数据的可视化展示方法、组件及可读存储介质
CN109710340B (zh) * 2019-01-18 2022-03-25 北京顺丰同城科技有限公司 软件工具调用方法及装置、软件工具封装方法及装置
CN109872265A (zh) * 2019-02-28 2019-06-11 山东浪潮云信息技术有限公司 一种可视化的政务服务数据分析方法
CN110471956A (zh) * 2019-08-13 2019-11-19 浪潮云信息技术有限公司 一种适用于政务应用的统计展示系统及方法
CN110647573B (zh) * 2019-09-17 2023-04-07 泰华智慧产业集团股份有限公司 基于数据库技术的图表可视化编辑方法和系统
CN110781652B (zh) * 2019-09-27 2022-05-03 成都四方伟业软件股份有限公司 一种在柱状类图表上绘制粒子和光效的方法及装置
CN112579223A (zh) * 2019-09-30 2021-03-30 北京国双科技有限公司 仪表盘图的显示方法、装置及电子设备
CN111125202B (zh) * 2019-12-10 2023-10-20 中国平安财产保险股份有限公司 基于大数据的地图定制方法、装置、设备和存储介质
CN113536748A (zh) * 2020-04-15 2021-10-22 北京沃东天骏信息技术有限公司 一种生成图表数据的方法和装置
CN111552705B (zh) * 2020-04-24 2023-08-04 北京字节跳动网络技术有限公司 基于图表的数据处理方法、装置、电子设备及介质
CN111787412A (zh) * 2020-07-22 2020-10-16 杭州当虹科技股份有限公司 一种支持多平台的数字新闻短视频快速制作的方法
CN112347171A (zh) * 2020-11-03 2021-02-09 广州朗国电子科技有限公司 一种将接口数据转为可视化图表方法及装置、存储介质
CN112416304B (zh) * 2020-11-23 2022-11-25 西安西热电站信息技术有限公司 一种将echarts扩展为html标准组件的方法
CN112651216A (zh) * 2020-12-31 2021-04-13 中国农业银行股份有限公司 一种图表创建方法和相关装置
CN113762145A (zh) * 2021-09-06 2021-12-07 华南理工大学 一种图表类型数据数字化方法
CN114253630B (zh) * 2021-12-23 2023-07-25 上海新炬网络信息技术股份有限公司 基于Java切面修改Form表单变化信息实现日志保存的方法
CN115857906B (zh) * 2023-02-02 2023-05-12 中电信数字城市科技有限公司 低代码图表生成的方法、系统、电子设备及介质
CN117687737B (zh) * 2024-02-01 2024-04-12 成都数之联科技股份有限公司 一种Echarts图表显示优化方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140173412A1 (en) * 2012-12-17 2014-06-19 Business Objects Software Ltd. Presenting visualizations of business intelligence data
CN105589909A (zh) * 2014-12-31 2016-05-18 中国银联股份有限公司 数据可视化实现系统及方法
CN105653436A (zh) * 2015-12-31 2016-06-08 山东中创软件商用中间件股份有限公司 一种数据展示方法及系统
CN105843945A (zh) * 2016-04-08 2016-08-10 联动优势科技有限公司 一种报表生成方法及系统
CN107220038A (zh) * 2016-11-25 2017-09-29 广东亿迅科技有限公司 数据可视化图形快速应用方法及系统

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8505108B2 (en) * 1993-11-18 2013-08-06 Digimarc Corporation Authentication using a digital watermark
CN100571348C (zh) * 2008-01-14 2009-12-16 中兴通讯股份有限公司 图形化生成网络电视电子节目指南系统模板的方法
CN101833583A (zh) * 2010-05-18 2010-09-15 中兴通讯股份有限公司 一种基于数据库生成报表的方法、装置和系统
CN102866886B (zh) * 2012-09-04 2015-04-29 北京航空航天大学 一种基于Web的算法动画可视化开发系统
US9684877B2 (en) * 2012-09-18 2017-06-20 Sap Se System and method for improved consumption models for analytics
CN105183466B (zh) * 2015-08-27 2019-04-26 国云科技股份有限公司 一种简化echarts调用的封装方法
CN106294299A (zh) * 2016-07-29 2017-01-04 杭州华三通信技术有限公司 一种报表生成方法及装置
CN106569800B (zh) * 2016-10-17 2020-10-23 北京小米移动软件有限公司 前端界面生成方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140173412A1 (en) * 2012-12-17 2014-06-19 Business Objects Software Ltd. Presenting visualizations of business intelligence data
CN105589909A (zh) * 2014-12-31 2016-05-18 中国银联股份有限公司 数据可视化实现系统及方法
CN105653436A (zh) * 2015-12-31 2016-06-08 山东中创软件商用中间件股份有限公司 一种数据展示方法及系统
CN105843945A (zh) * 2016-04-08 2016-08-10 联动优势科技有限公司 一种报表生成方法及系统
CN107220038A (zh) * 2016-11-25 2017-09-29 广东亿迅科技有限公司 数据可视化图形快速应用方法及系统

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111124372A (zh) * 2019-12-26 2020-05-08 福建福诺移动通信技术有限公司 一种简化开发图表前后端设计方法及系统
CN111178969A (zh) * 2019-12-30 2020-05-19 河南拓普计算机网络工程有限公司 市场主体迁移特征分析方法、装置、电子设备及存储介质
CN111176634A (zh) * 2020-01-17 2020-05-19 天阳宏业科技股份有限公司 一种可配置化可嵌入的高管视图的方法及装置
CN115328486A (zh) * 2022-10-17 2022-11-11 北京安盟信息技术股份有限公司 基于动态传入数据的echarts调用封装方法、装置、介质及设备
CN115328486B (zh) * 2022-10-17 2023-02-03 北京安盟信息技术股份有限公司 基于动态传入数据的echarts调用封装方法、装置、介质及设备

Also Published As

Publication number Publication date
CN108228169B (zh) 2020-10-13
CN108228169A (zh) 2018-06-29

Similar Documents

Publication Publication Date Title
WO2019109485A1 (zh) 基于eCharts工具的图表制作方法、装置、设备及介质
US10423393B2 (en) Intelligent flow designer
WO2019127824A1 (zh) 可视化图表页面实现方法、装置、终端设备及存储介质
US9524283B2 (en) Techniques to remotely access form information and generate a form
AU2012271774B2 (en) Automated user interface object transformation and code generation
US9087296B2 (en) Navigable semantic network that processes a specification to and uses a set of declaritive statements to produce a semantic network model
WO2021217911A1 (zh) 业务网站项目构建方法、装置、计算机设备和存储介质
TW202113586A (zh) 小程式產生方法以及裝置
US11797273B2 (en) System and method for enhancing component based development models with auto-wiring
RU2386171C2 (ru) Выравнивание в списках, сформированных по шаблону
US20150242389A1 (en) Techniques to identify user interface elements associated with model violation events
US12008013B2 (en) Applying a visual analytics intent language to generate data visualizations
US20190005228A1 (en) Trusted and untrusted code execution in a workflow
US20210117056A1 (en) Definition of a graphical user interface dashboard created with manually input code and user selections
CN113312052A (zh) 一种组件调用方法、装置、电子设备以及存储介质
US10896161B2 (en) Integrated computing environment for managing and presenting design iterations
CN110780970A (zh) 数据筛选方法、装置、设备及计算机可读存储介质
US11409763B1 (en) Applying a visual analytics intent language to generate data visualizations
US20130318048A1 (en) Techniques to modify file descriptors for content files
US20150277723A1 (en) Exporting a component of a currently displayed user interface to a development system
CN113342413B (zh) 用于处理组件的方法、装置、设备、介质和产品
US11579755B1 (en) Dynamic address-based dashboard customization
US20230262044A1 (en) Multi-cloud data connections for white-labeled platforms
US20230230324A1 (en) Method, System, Equipment and Medium for Modifying the Layering Layer Information of Finite Element Model Unit
JP6400191B2 (ja) アプリケーションデータモデルに従って指定されたオブジェクトを更新するよう設計されたルールを実現する命令セットの生成

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18885050

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 13.10.2020)

122 Ep: pct application non-entry in european phase

Ref document number: 18885050

Country of ref document: EP

Kind code of ref document: A1