CN105183466B - A kind of packaging method that simplified echarts is called - Google Patents
A kind of packaging method that simplified echarts is called Download PDFInfo
- Publication number
- CN105183466B CN105183466B CN201510537372.2A CN201510537372A CN105183466B CN 105183466 B CN105183466 B CN 105183466B CN 201510537372 A CN201510537372 A CN 201510537372A CN 105183466 B CN105183466 B CN 105183466B
- Authority
- CN
- China
- Prior art keywords
- parameter
- echarts
- primary
- module
- configuration
- Prior art date
- Legal status (The legal status 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 status listed.)
- Active
Links
Abstract
The present invention relates to front end development technique field, especially a kind of packaging method that simplified echarts is called.The parameter of echarts is divided by the present invention: the four class parameters such as fixed pattern parameter, data presentation parameter, functional module parameter and the parameter that is of little use, use the processing such as simplification, mapping, module encapsulation and parameter solidification, mode is performed corresponding processing to various parameters, encapsulates an echarts calling module；Incoming one is key configuration parameter for the json data of value with html element ID value, can realize Mass production echarts chart.The present invention has used the modes such as mode and the definition default global style of simplified mapping in the logic of encapsulation, so that developer is able to use simple and fast mode and calls echarts Mass production chart；It is very suitable to the occasion for repeatedly calling echarts to generate diagrammatic representation.
Description
Technical field
The present invention relates to front end development technique field, especially a kind of packaging method that simplified echarts is called.
Background technique
Attention with the development of front-end technology and people to big data in recent years, various big data diagrammatic representation tools are got over
In the visual field to appear in developer more, Baidu also provides the echarts of a outstanding open source.Echarts relies on
Powerful diagrammatic representation abundant and the customized configuration parameter of height, more and more projects for appearing in various data and showing
In.Echarts also uses the exploitation standard of AMD popular at present, provides explanation in the example of echarts, but AMD adds
Load mode be all for many developers it is very strange, need to go using the additional time to understand AMD.It calls every time all
The position for correctly configuring echarts and require is needed to load necessary module, it is clear that repeating complicated load information is not
Efficient development scheme；And just in case the storage position of echarts changes, developer has to search all calling
Correct the path of echarts.The customized configuration parameter of echarts height is intended to incoming a large amount of and complexity not simultaneously
The parameter easy to remember recalled；Wherein having significant component of parameter is that relatively-stationary and modification probability is very small.The result is that opening
Originator requires to take quite a lot of fixations and the same pattern parameter when calling echarts to generate chart every time, it is clear that this
Kind method of calling is the waste of efficiency.Once the pictorial statement pattern of system needs to change, developer has to search each
It calls, the pattern called every time is modified, it is clear that cannot be by valuable time and human input to this inefficient in project development
Modification in.
Summary of the invention
Present invention solves the technical problem that being to provide a kind of packaging method that simplified echarts is called；Tune is effectively provided
The efficiency of chart is generated with echarts.
The technical solution that the present invention solves above-mentioned technical problem is:
A band html element ID is constructed by parametric classification, simplified mapping, definition default value, module encapsulation process mode
The batch json data of value and corresponding echarts configuration parameter；Wherein echarts configuration parameter is after simplifying or ecosystem is matched
Parameter is set, calls the interface in canned program to parse json data, uses echarts Mass production chart；
The batch json data are similar to following form:
Var config={ " chart1 ": chart1_config }；
Wherein key value, that is, chart1 is the ID value for needing to show the html element of chart, and chart1_config is chart1
Corresponding echarts configuration parameter, has equally used json format, configuration parameter be json data after encapsulation and/or
Primary json data call function to judge the type of current configuration parameters, decide whether to call resolution logic will be after encapsulation
Json configuration parameter is parsed into the primary json configuration parameter of echarts；
Parameter analysis of electrochemical, definition default parameters and echarts are introduced the logics such as calling and are encapsulated in one by the canned program
In a js file, removes echarts from and introduce and the detailed problems such as loading module；It only needs a small amount of using using canned program to define
Simple configuration configuration parameter produces echarts pictorial statement.
The detailed process of the method are as follows:
The first step introduces two files of echarts.js master file and package module createEcharts.js；
Second step, modification encapsulate the path echarts at the top of js module file and introduce；
Third step, by calling the interface of BEcharts.load ({ domID:config }) to be passed to data, load traverses number
According to judging that config is the configuration parameter that package module defines or the primary configuration parameter of echarts, held to different parameters
The different processing of row:
The method of orginalCreate simply uses echarts in the configuration parameter calling module primary to echarts
Figure is directly generated, the configuration parameter of module definition is then passed through after parsing generates the primary parameter configuration of echarts and is recalled
Echarts generates figure；
4th step, the configuration parameter of module definition are parsed into primary echarts configuration parameter；
5th step generates chart using the native interface that echarts generates chart using parsed parameter.
In the step four, echarts primary model parameter at four classes and is used into different processing modes:
A, data presentation parameter: data presentation parameter is necessary parameter, is most important parameter, is made by way of mapping
It is incoming with simpler mode；Wherein, title and subtitle needs primary parameter to be passed in the following manner:
Title:{ text: ' main title ', subtext: ' subtitle ', the mode of encapsulation is to tear main title and subtitle open
Be divided into two parameters and use title respectively: ' main title ', subTitle: form as ' subtitle ' is incoming, and canned program
Contrary operation is done, the parameter of fractionation is assembled into primary parameter, other necessary parameters are also using this analysis mode；
B, fixed pattern parameter: the auxiliary parameter of display data, such as: the left-justify placed in the middle of the position of title, whether legend
Display and display position etc.；This kind of parameter is usually usually fixed in the same system, so all passing without calling every time
Enter；Using the mode for simplifying mapping, by such parameter definition in canned program；Canned program first detects whether external incoming
Parameter, it is incoming then cover default parameters using external parameter, it is incoming to continue to use default parameters, the pattern after merging is joined
Number is parsed into primary echarts parameter；
C, functional module parameter: echarts provides some functional modules, has Data View, amplification, saves picture
Deng these modules need to be passed to similar:
These modules are encapsulated in inside by the probability very little of the change of these functional modules in the same system, canned program
And define the parameter of some defaults；The form of the incoming array in outside, if only opening module, need to only be passed to one it is corresponding
Character key value, the parameter that encapsulation logic is defaulted according to incoming key value load；If necessary to be opened using non-default configuration
Module, then need incoming complete primary module parameter, this two-part Parameter analysis of electrochemical is merged into primary parameter by package module；
D, the parameter being of little use: it is some just to need parameter to be used under special circumstances, these parameters or only need using
Echarts primary default value, or the internal value using fixation go to define, just incoming in outside when needing to change；No
Common parameter is often more deep parameter, using different Mapping Resolution mode；Using " level 1_ level 2:{ is former
Raw parameter } " this form goes to define, and canned program judges whether to be passed to the parameter that is of little use, if be passed to according to being of little use
The key value of parameter parses correct primary hierarchical relationship, and according to covering parameter, parameter is merged into the original for having completed parsing
In raw echarts parameter.
Core of the invention is to simplify the parameter of echarts: by parametric classification, simplifying mapping, definition default value, mould
Batch json data of the processing such as the block encapsulation method construct one with html element ID value and corresponding echarts configuration parameter, are adjusted
Interface is generated with the echarts of canned program, the details of echarts loading module calling can be shielded completely, quickly and easily
Echarts chart is generated using batch json batch data.Path configuration and AMD module loading of the present invention by echarts are sealed
In module file, developer only need to simply draw without calling echarts to call again when generating chart every time
Enter package module file, the interface and parameter provided using package module removes Mass production echarts chart.
Echarts configuration parameter in above-mentioned batch json data is similarly json data, and primary echarts is supported to match
It sets parameter and by encapsulating simplified echarts configuration parameter, canned program can determine whether the type of parameter current, to different
Parameter calls different internalist methodologies.
The present invention simplifies the quantity and complexity of the incoming parameter of echarts single, improves the development efficiency of project；It is non-
Often it is suitble in the relatively fixed and frequent project for calling echarts of pattern.The application compares the example of official for result,
Size of code reduces 62% size of code.Parameter of the present invention supports parameter primary and by encapsulation, and after encapsulation
Parameter also allow to go using the mode of single layer to search and replace primary data.The present invention provides the modification sides of global style
Formula, the parameter of functional module support character string and json configuration, open the function using default value if it is simple character string
Module needs to go to modify using primary echarts functional parameter if incoming is json configuration.
Detailed description of the invention
The following further describes the present invention with reference to the drawings:
Fig. 1 is detailed process of the present invention.
Specific embodiment
The present invention constructs a band html by parametric classification, simplified mapping, definition default value, module encapsulation process mode
The batch json data of element ID value and corresponding echarts configuration parameter；Wherein echarts configuration parameter is after simplifying or primary
The configuration parameter of state calls the interface in canned program to parse json data, uses echarts Mass production chart；
The batch json data are similar to following form:
Var config={ " chart1 ": chart1_config }；
Wherein key value, that is, chart1 is the ID value for needing to show the html element of chart, and chart1_config is chart1
Corresponding echarts configuration parameter, has equally used json format, configuration parameter be json data after encapsulation and/or
Primary json data call function to judge the type of current configuration parameters, decide whether to call resolution logic will be after encapsulation
Json configuration parameter is parsed into the primary json configuration parameter of echarts；
Parameter analysis of electrochemical, definition default parameters and echarts are introduced the logics such as calling and are encapsulated in one by the canned program
In a js file, removes echarts from and introduce and the detailed problems such as loading module；It only needs a small amount of using using canned program to define
Simple configuration configuration parameter produces echarts pictorial statement.
The detailed process of the method are as follows:
The first step introduces two files of echarts.js master file and package module createEcharts.js；
Second step, modification encapsulate the path echarts at the top of js module file and introduce；
Third step, by calling the interface of BEcharts.load ({ domID:config }) to be passed to data, load traverses number
According to judging that config is the configuration parameter that package module defines or the primary configuration parameter of echarts, held to different parameters
The different processing of row:
The method of orginalCreate simply uses echarts in the configuration parameter calling module primary to echarts
Figure is directly generated, the configuration parameter of module definition is then passed through after parsing generates the primary parameter configuration of echarts and is recalled
Echarts generates figure；
4th step, the configuration parameter of module definition are parsed into primary echarts configuration parameter；
A, data presentation parameter: data presentation parameter is necessary parameter, is most important parameter, is made by way of mapping
It is incoming with simpler mode；Wherein, title and subtitle needs primary parameter to be passed in the following manner:
Title:{ text: ' main title ', subtext: ' subtitle ', the mode of encapsulation is to tear main title and subtitle open
Be divided into two parameters and use title respectively: ' main title ', subTitle: form as ' subtitle ' is incoming, and canned program
Contrary operation is done, the parameter of fractionation is assembled into primary parameter, other necessary parameters are also using this analysis mode；
B, fixed pattern parameter: the auxiliary parameter of display data, such as: the left-justify placed in the middle of the position of title, whether legend
Display and display position etc.；This kind of parameter is usually usually fixed in the same system, so all passing without calling every time
Enter；Using the mode for simplifying mapping, by such parameter definition in canned program；Canned program first detects whether external incoming
Parameter, it is incoming then cover default parameters using external parameter, it is incoming to continue to use default parameters, the pattern after merging is joined
Number is parsed into primary echarts parameter；
C, functional module parameter: echarts provides some functional modules, has Data View, amplification, saves picture
Deng these modules need to be passed to similar:
These modules are encapsulated in inside by the probability very little of the change of these functional modules in the same system, canned program
And define the parameter of some defaults；The form of the incoming array in outside, if only opening module, need to only be passed to one it is corresponding
Character key value, the parameter that encapsulation logic is defaulted according to incoming key value load；If necessary to be opened using non-default configuration
Module, then need incoming complete primary module parameter, this two-part Parameter analysis of electrochemical is merged into primary parameter by package module；
D, the parameter being of little use: it is some just to need parameter to be used under special circumstances, these parameters or only need using
Echarts primary default value, or the internal value using fixation go to define, just incoming in outside when needing to change；No
Common parameter is often more deep parameter, using different Mapping Resolution mode；Using " level 1_ level 2:{ is former
Raw parameter } " this form goes to define, and canned program judges whether to be passed to the parameter that is of little use, if be passed to according to being of little use
The key value of parameter parses correct primary hierarchical relationship, and according to covering parameter, parameter is merged into the original for having completed parsing
In raw echarts parameter.
5th step generates chart using the native interface that echarts generates chart using parsed parameter.
Specifically as shown in Figure 1, the present invention is to be shielded the calling details of echarts by encapsulating a js file module,
The primary parameter of echarts is classified, maps the processing such as simplified, definition default value, shows that necessary data pass through outside
Incoming, other parameters cover default value if incoming, and otherwise using the default value for being defined on canned program, analytical function is then
A small amount of presentation parameter can be integrated with the default parameters being defined in package module, it is primary to ultimately generate echarts
Configuration parameter.
The first step introduces echarts.js and package module file by<script>label respectively
CreateEcharts.js both of these documents, echarts.js need to be previously incorporated in createEcharts.js.
Second step modifies createEcharts.js global information and default parameters according to the actual conditions of project:
1. path parameter: the third line " echarts: ' plugins/echarts ' ".
2. default parameters and mapping ruler: the defaults json configuration parameter that the 28th row starts, according to the reality of project
Demand modification.
3. the functional module default parameters of modified module: cursorStyle and featureConfig.
Third step in other<script>labels or in js file, is passed to batch json configuration data, as follows:
Wherein first layer key i.e. main1 is the ID for needing to generate the html element of echarts chart, subsequent to be
Parameter needed for generating this echarts chart.
4th step, the interface provided using package module are passed to above-mentioned parameter and produce echarts chart:
BEcharts.load(config)。
Claims (3)
1. a kind of packaging method that simplified echarts is called, it is characterised in that: by parametric classification, simplify mapping, definition default
Value, module encapsulation process mode construct the batch json data with html element ID value and corresponding echarts configuration parameter；
Wherein echarts configuration parameter be simplify after or ecosystem configuration parameter, call canned program in interface parse json number
According to using echarts Mass production chart；
The batch json data use following form:
Var config={ " chart1 ": chart1_config }；
Wherein key value, that is, chart1 is the ID value for needing to show the html element of chart, and chart1_config is chart1 corresponding
Echarts configuration parameter, equally used json format, configuration parameter is json data after encapsulation and/or primary
Json data, call function judge the types of current configuration parameters, decide whether calling resolution logic by the json after encapsulation
Configuration parameter is parsed into the primary json configuration parameter of echarts；
Parameter analysis of electrochemical, definition default parameters and echarts are introduced calling logic and are encapsulated in a js text by the canned program
In part, removes echarts from and introduce and loading module problem；Echarts figure is generated using the configuration parameter that canned program defines
Report.
2. the packaging method that simplified echarts according to claim 1 is called, it is characterised in that: the method it is specific
Process are as follows:
The first step introduces two files of echarts.js master file and package module createEcharts.js；
Second step, modification encapsulate the path echarts at the top of js module file and introduce；
Third step, by calling the interface of Echarts.load ({ domID:config }) to be passed to data, load ergodic data is sentenced
Disconnected config is the configuration parameter that package module defines or the primary configuration parameter of echarts, is executed not to different parameters
Same processing:
The method of orginalCreate simply uses echarts direct in the configuration parameter calling module primary to echarts
Figure is generated, the configuration parameter of module definition is then passed through after parsing generates the primary parameter configuration of echarts and is recalled
Echarts generates figure；
4th step, the configuration parameter of module definition are parsed into primary echarts configuration parameter；
5th step generates chart using the native interface that echarts generates chart using parsed parameter.
3. the packaging method that simplified echarts according to claim 2 is called, it is characterised in that: by the 4th step
In primary echarts configuration parameter be organized into four classes, and use different processing modes:
A, data presentation parameter: data presentation parameter is necessary parameter, using simpler mode incoming by way of mapping；
Wherein, title and subtitle needs primary parameter to be passed in the following manner: title:{ text: ' main title ',
Subtext: ' subtitle ', the mode of encapsulation is that main title and subtitle are split into two parameters to use title respectively: ' it is main
Title ', subTitle: ' subtitle ' as form it is incoming, and canned program does contrary operation, and the parameter of fractionation is assembled into
Primary parameter, other must parameter be also using this analysis mode；
B, fixed pattern parameter: the auxiliary parameter of display data, the position left-justify placed in the middle including title, legend whether display
The display position and；This kind of parameter is fixed in the same system, so all incoming without calling every time；It is mapped using simplifying
Mode, by such parameter definition in canned program；Canned program first detects whether external incoming parameter, incoming then use
External parameter covers default parameters, not incoming to continue to use default parameters, by the pattern Parameter analysis of electrochemical after merging at primary
Echarts parameter；
C, functional module parameter: echarts provides some functional modules, has Data View, amplification, saves picture；
These modules are encapsulated in inside and define the parameter of some defaults by canned program；The form of the incoming array in outside, if
Only opening module need to only be passed to a corresponding character key value, and encapsulation logic is according to incoming key value load default
Parameter；If necessary to carry out opening module using non-default configuration, then need incoming complete primary module parameter, package module by this
Two-part Parameter analysis of electrochemical is merged into primary parameter；
D, the parameter being of little use: these parameters or the default value that need to only use echarts primary, or the internal value using fixation
It goes to define, it is just incoming in outside when needing to change；The parameter being of little use uses different Mapping Resolution mode；Using
" the primary parameter of level 1_ level 2:{ } " this form goes to define, and canned program judges whether to be passed to the parameter that is of little use, if
It is passed to the correct primary hierarchical relationship parsed according to the key value of parameter that is of little use, then the parameter that will be of little use is merged into
In primary echarts parameter through completing parsing.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510537372.2A CN105183466B (en) | 2015-08-27 | 2015-08-27 | A kind of packaging method that simplified echarts is called |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510537372.2A CN105183466B (en) | 2015-08-27 | 2015-08-27 | A kind of packaging method that simplified echarts is called |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105183466A CN105183466A (en) | 2015-12-23 |
| CN105183466B true CN105183466B (en) | 2019-04-26 |
Family
ID=54905565
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510537372.2A Active CN105183466B (en) | 2015-08-27 | 2015-08-27 | A kind of packaging method that simplified echarts is called |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105183466B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106599013A (en) * | 2016-08-31 | 2017-04-26 | 重庆车杰盟科技有限公司 | Workflow of chart data service management system |
| CN107704239B (en) * | 2017-10-09 | 2020-10-16 | 武汉斗鱼网络科技有限公司 | Configuration generation method and device and electronic equipment |
| CN108228169B (en) * | 2017-12-08 | 2020-10-13 | 平安科技（深圳）有限公司 | Chart making method, device, equipment and medium based on eCharts tool |
| CN109697254A (en) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | A kind of method of front end page chart components |
| CN110286905B (en) * | 2019-06-21 | 2022-12-02 | 北京计算机技术及应用研究所 | Echarts-based data display method |
| CN112433726A (en) * | 2020-12-04 | 2021-03-02 | 上海悦易网络信息技术有限公司 | Echarts chart assembly packaging method and device |
| CN115328486B (en) * | 2022-10-17 | 2023-02-03 | 北京安盟信息技术股份有限公司 | Echarts calling and packaging method, device, medium and equipment based on dynamic incoming data |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914531A (en) * | 2014-03-31 | 2014-07-09 | 百度在线网络技术（北京）有限公司 | Method and device for processing data |
| CN103985279A (en) * | 2014-05-27 | 2014-08-13 | 北京师范大学 | Socialized homework evaluation and student learning process information recording system and method |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9430206B2 (en) * | 2011-12-16 | 2016-08-30 | Hsiu-Ping Lin | Systems for downloading location-based application and methods using the same |
| EP2608056B1 (en) * | 2011-12-23 | 2020-06-10 | Software AG | Creating html/css representations of a geometric symbol |
-
2015
- 2015-08-27 CN CN201510537372.2A patent/CN105183466B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914531A (en) * | 2014-03-31 | 2014-07-09 | 百度在线网络技术（北京）有限公司 | Method and device for processing data |
| CN103985279A (en) * | 2014-05-27 | 2014-08-13 | 北京师范大学 | Socialized homework evaluation and student learning process information recording system and method |
Non-Patent Citations (1)
| Title |
|---|
| 农产品价格采集、预测及微信发布系统的设计与实现;王磊;《湘潭大学自然科学学报》;20150630;第37卷(第2期);全文 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105183466A (en) | 2015-12-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105183466B (en) | A kind of packaging method that simplified echarts is called | |
| US8549497B2 (en) | High-level hypermedia synthesis for adaptive web | |
| CN110889270B (en) | Form page document generation method, form page rendering method and device | |
| CN101777004B (en) | Method and system for realizing BPEL sub-process multiplexing based on template in service-oriented environment | |
| US6847981B2 (en) | System and method for generating EJB components from reusable business logics in servlet program | |
| US9922009B2 (en) | Network media information display system, method, apparatus and server | |
| CN111581083B (en) | Interface testing method and device, electronic equipment and storage medium | |
| CN106648662B (en) | Report generation device and method based on project cost calculation description language BCL | |
| EP3037958B1 (en) | Declarative user interface representation conversion via hierarchical templates | |
| US10120660B2 (en) | Systems and methods for producing launchers for a mobile terminal | |
| CN109298954B (en) | A kind of intelligence calls the method and device of Dubbo remote service | |
| CN106649634A (en) | JSON data analysis method and device | |
| CN104899826A (en) | Method of manufacturing mobile phone theme based on PSD analytic technique | |
| CN111324390A (en) | Device and method for realizing APP content configuration and real-time update | |
| CN112083919A (en) | YAML template-based target service code generation method and device | |
| CN116974620A (en) | Application program generation method, operation method and corresponding device | |
| US8700680B2 (en) | Decoder compiler, computer readable medium, and communication device | |
| CN111176628B (en) | Front-end access method under modular architecture and storage medium | |
| CN114706571B (en) | DSL-based declarative visualization chart development method and system | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| CN110120945A (en) | A kind of method of data structured encapsulation | |
| CN106055338B (en) | A kind of Open Architecture CNC System of Display Interface secondary developing platform and its design method | |
| JP2008052356A (en) | Source code automatic generation device | |
| CN112799734B (en) | Flow management method, image processing method, and corresponding platform and device thereof | |
| WO2008075087A1 (en) | Code translator and method of automatically translating modelling language code to hardware language code |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 523808 19th Floor, Cloud Computing Center, Chinese Academy of Sciences, No. 1 Kehui Road, Songshan Lake Hi-tech Industrial Development Zone, Dongguan City, Guangdong Province Applicant after: G-Cloud Technology Co., Ltd. Address before: 523808 No. 14 Building, Songke Garden, Songshan Lake Science and Technology Industrial Park, Dongguan City, Guangdong Province Applicant before: G-Cloud Technology Co., Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |