Vue3-based Echarts component secondary packaging method and system

Abstract

The invention relates to the technical field of Web front-end visualization, in particular to a Vue3-based Echarts component secondary packaging method and system, and the method comprises the steps: constructing a universal logic hook (user Echarts) based on a Compression API of Vue3, the universal logic hook (user Echarts) being used for the centralized management of the life cycle and event response of an Echarts instance; packaging a plurality of independent business components according to a predefined chart classification system; constructing a unified component entry, receiving chart parameters transmitted from the outside by the unified component entry, and dynamically loading and rendering corresponding business components according to the chart parameters; a performance optimization strategy is implemented in the packaging method, and the performance optimization strategy comprises anti-shake processing, asynchronous dynamic loading and configuration combination optimization. Through modular design and standardized interfaces, efficient reuse and unified management of Echarts components are realized, the problems of code redundancy, style chaos, life cycle management and the like are solved, the development efficiency is remarkably improved, and the maintenance cost is reduced.

Description

Technical Field

[0001] This invention relates to the field of web front-end visualization technology, specifically to a method and system for secondary encapsulation of Echarts components based on Vue3. Background Technology

[0002] As data visualization becomes increasingly important in web applications, Echarts, a feature-rich and high-performance open-source visualization library, has been widely used in various business scenarios. In practice, to improve efficiency, some developers have attempted to encapsulate Echarts to create reusable chart components. However, most existing encapsulation solutions remain at a simple wrapper level, failing to effectively address the issue of flexible adaptation to complex business scenarios, resulting in limitations in the actual use of the encapsulated components.

[0003] Currently, this type of packaging solution mainly faces the following technical challenges:

[0004] 1) In multi-chart application scenarios, repeatedly writing basic code such as chart initialization, event binding and responsive adjustment results in a lot of redundancy, significantly reducing development efficiency and increasing maintenance difficulty;

[0005] 2) The lack of a unified style and theme management mechanism makes it difficult to maintain a consistent visual style for various charts. When switching themes, each chart needs to be modified individually, which is labor-intensive and prone to errors.

[0006] 3) The existing encapsulation structure has weak scalability, making it difficult to support custom interaction logic or specific business functions, and failing to achieve effective accumulation and reuse of functional modules;

[0007] 4) Failure to fully integrate the component lifecycle of modern front-end frameworks can easily lead to performance issues such as abnormal chart rendering or memory leaks due to improper timing of instance initialization and destruction.

[0008] The above reasons result in low development efficiency, high maintenance costs, and difficulty in meeting complex and ever-changing business needs in practical applications of existing technologies. Summary of the Invention

[0009] To address the above technical problems, this invention provides a technical solution for a method and system for secondary encapsulation of Echarts components based on Vue3.

[0010] The technical problem solved by this invention can be achieved by the following technical solutions:

[0011] A method for secondary encapsulation of Echarts components based on Vue3, including:

[0012] Step S1: Build a general logic hook, useEcharts, based on Vue3's Composition API. The general logic hook, useEcharts, is used to centrally manage the lifecycle and event response of Echarts instances.

[0013] Step S2: Based on the predefined chart classification system, encapsulate multiple independent business components;

[0014] Step S3: Construct a unified component entry point. The unified component entry point receives chart parameters passed in from the outside and dynamically loads and renders the corresponding business components according to the chart parameters.

[0015] Preferably, the centralized management of the Echarts instance lifecycle and event response in step S1 includes: creation, initialization, destruction, configuration update, and window size change monitoring of the Echarts instance.

[0016] Preferably, step S1 includes:

[0017] Step S11: In the onMounted lifecycle phase, the ECharts instance is initialized based on the readiness status verification result of the DOM node, and the ECharts instance is forcibly destroyed and the window size change event listener is removed in the onUnmounted lifecycle phase.

[0018] Step S12: Based on Vue3's watch mechanism, perform deep reactive listening on the configuration item object, and automatically trigger the setOption method of the chart instance when the configuration item changes;

[0019] Step S13: Based on the input chart type parameters and the predefined event mapping table, dynamically bind differentiated event handling functions to the chart instance, including click, hover, and custom interaction logic.

[0020] Preferably, step S2 includes:

[0021] Step S21: Establish the chart classification system based on the chart types and display formats of Echarts;

[0022] Step S22: Based on the chart classification system, create corresponding folder directories according to chart type, and create independent business component files in each directory according to different display formats;

[0023] Step S23: In each of the business components, the parameters of the Echarts configuration items are standardized and defined, and the original nested object attribute paths are converted into flat string parameter names connected by a predefined separator.

[0024] Step S24: In each business component, expose the Echarts instance operation methods to the parent component through Vue3's expose API.

[0025] Preferably, step S3 includes:

[0026] Step S31: Create the basic component of the unified component entry and define the parameter passing rules. The parameters include chart format parameters, chart type parameters and chart configuration item parameters.

[0027] Step S32: Preset general configuration and custom configuration based on chart type within the basic components respectively;

[0028] Step S33: Dynamically match and load the corresponding business components based on the received chart format parameters and chart type parameters;

[0029] Step S34: Register the basic component as a global component.

[0030] Preferably, the preset general configuration and the custom configuration based on the chart type in step S32 can both be fully or partially covered by the chart configuration item parameters passed from outside.

[0031] Preferably, step S33 includes:

[0032] Step S331: The basic component calculates and generates the resource identifier of the target business component based on the received chart format parameters and chart type parameters.

[0033] Step S332: Initiate a dynamic loading request based on the resource identifier. If the target business component exists, perform asynchronous loading and pass the configuration parameters to the target business component. If the target business component does not exist, trigger a degradation strategy and load the preset 404 error message component.

[0034] Step S333: Within the successfully loaded business component, the general logic hook useEcharts is automatically invoked to centrally handle the creation and initialization of the Echarts instance, resize event listening, and configuration updates, and then renders the chart to the page.

[0035] Preferably, it further includes:

[0036] Step S4: Implement performance optimization strategies in the encapsulation method. The performance optimization strategies include debouncing, asynchronous dynamic loading, and configuration merging optimization.

[0037] Preferably, step S4 includes:

[0038] Step S41: Perform debouncing optimization on the frequent update operations of the window resize event and chart configuration parameters;

[0039] Step S42: Dynamically load the business component using Vue3's defineAsyncComponent method;

[0040] Step S43: During the merging process of the chart configuration item parameters, perform a deep copy of the data to isolate the configuration object, and standardize the parameter passing parameters of the business component to define it as a flat structure of non-reference type.

[0041] It also includes a secondary encapsulation system for Echarts components based on Vue3, which implements the secondary encapsulation method for Echarts components based on Vue3 as described above, including:

[0042] The general logic hook module is used to build general logic hooks (useEcharts) to centrally manage the lifecycle and event response of Echarts instances;

[0043] The business component library module, connected to the general logic hook module, is used to store and manage multiple independent business components encapsulated according to the chart classification system;

[0044] The unified component entry module is connected to the business component library module. It is used to build a unified component entry, receive chart parameters passed from the outside, and dynamically load and render the corresponding business components in the business component library module according to the chart parameters.

[0045] The performance optimization module, connected to the unified component entry module, is used to implement performance optimization strategies, including event debouncing, asynchronous dynamic loading of components, and optimization of configuration items.

[0046] Beneficial effects: This invention uses the useEcharts hook built through the Composition API to uniformly manage the chart lifecycle and event response. Combined with the dynamic loading mechanism of classified encapsulated business components and unified component entry, it significantly reduces repetitive code writing, realizes centralized management of style themes and flexible expansion of component functions, and conforms to the Vue3 component lifecycle, effectively improving development efficiency, reducing maintenance costs, and ensuring stable performance in complex business scenarios. Attached Figure Description

[0047] Figure 1 This is a flowchart of the method of the present invention;

[0048] Figure 2 This is a flowchart of method step S1 of the present invention;

[0049] Figure 3 This is a flowchart of method step S2 of the present invention;

[0050] Figure 4 This is a flowchart of method step S3 of the present invention;

[0051] Figure 5 This is a flowchart of method step S33 of the present invention;

[0052] Figure 6 This is a 3D bar chart rendering of the present invention;

[0053] Figure 7 This is a rendering of diagram 404 of the present invention;

[0054] Figure 8 This is a flowchart of method step S4 of the present invention;

[0055] Figure 9 This is a system block diagram of the present invention. Detailed Implementation

[0056] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0057] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other.

[0058] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the invention.

[0059] Reference Figure 1 This invention provides a method for secondary encapsulation of Echarts components based on Vue3, including:

[0060] Step S1: Build a general logic hook, useEcharts, based on Vue3's Composition API. The general logic hook, useEcharts, is used to centrally manage the lifecycle and event response of Echarts instances.

[0061] Step S2: Based on the predefined chart classification system, encapsulate multiple independent business components;

[0062] Step S3: Construct a unified component entry point. The unified component entry point receives chart parameters passed in from the outside and dynamically loads and renders the corresponding business components according to the chart parameters.

[0063] Specifically, in this embodiment of the invention, in response to the problems of code redundancy, chaotic style management, poor scalability and improper lifecycle management faced by traditional encapsulation solutions in complex business scenarios, the invention avoids risks such as repeated initialization, manual event binding and reactive processing, inconsistent visual styles and memory leaks by constructing centralized logic hooks, implementing a chart classification and encapsulation system and establishing a unified scheduling entry point. This achieves high cohesion and low coupling of chart logic, unified control of theme styles, rapid customization of business functions and seamless collaboration with the Vue3 framework lifecycle.

[0064] Among them, Vue3 is a popular progressive JavaScript framework that adopts a proxy-based reactive system and a composable API design; CompositionAPI is a function-based API composition method provided by Vue3, which supports organizing related logic in the same code area and includes core functions such as ref, reactive, watch, and lifecycle hooks; Hook is a logic reuse pattern that encapsulates reusable state logic through custom functions; the general logic hook useEcharts is a composable function implemented based on CompositionAPI, which uses the Hook pattern to encapsulate general logic such as lifecycle management, event response, and configuration updates of Echarts instances; Echarts is an open-source data visualization chart library from Baidu, which provides rich chart types and powerful interactive functions.

[0065] As a preferred embodiment of the present invention, the centralized management of the lifecycle and event response of the Echarts instance in step S1 includes: creation, initialization, destruction, configuration update and window size change monitoring of the Echarts instance.

[0066] Specifically, in traditional solutions, the lifecycle management of Echarts instances is disconnected from the lifecycle of Vue components, which can easily lead to improper initialization timing and memory leaks. In this embodiment of the invention, a custom Hook called `useEcharts` is constructed to encapsulate the core logic of Echarts instance creation, configuration updates, event binding, resize listening, and destruction into reusable composable functions. This achieves perfect synchronization with the lifecycle of Vue3 components, ensures accurate timing of instance initialization, and effectively prevents memory leaks through an automated resource cleanup mechanism, thereby significantly improving the stability and performance of the chart component.

[0067] Accordingly, refer to Figure 2 Step S1 includes:

[0068] Step S11: In the onMounted lifecycle phase, the ECharts instance is initialized based on the readiness status verification result of the DOM node, and the ECharts instance is forcibly destroyed and the window size change event listener is removed in the onUnmounted lifecycle phase to avoid memory leaks.

[0069] Step S12: Based on Vue3's watch mechanism, perform deep reactive listening on the configuration item object. When the configuration item changes, the setOption method of the chart instance is automatically triggered to achieve incremental updates.

[0070] Step S13: Based on the input chart type parameters and the predefined event mapping table, dynamically bind differentiated event handling functions to the chart instance, including click, hover, and custom interaction logic.

[0071] It is evident that the fine-grained lifecycle management of useEcharts Hook not only solves the initialization timing problem in traditional solutions, but also achieves automatic synchronization of chart configurations and flexible expansion of interaction logic through reactive configuration updates and dynamic event binding mechanisms, providing reliable technical support for the use of charts in complex business scenarios.

[0072] As a preferred embodiment of the present invention, refer to Figure 3 Step S2 includes:

[0073] Step S21: Establish the chart classification system based on the chart types and display formats of Echarts;

[0074] Step S22: Based on the chart classification system, create corresponding folder directories according to chart type, and create independent business component files in each directory according to different display formats;

[0075] Step S23: In each of the business components, the parameters of the Echarts configuration items are standardized and defined, and the original nested object attribute paths are converted into flat string parameter names connected by a predefined separator.

[0076] Step S24: In each business component, the Echarts instance operation methods are exposed to the parent component through Vue3's expose API to support direct external calls.

[0077] Specifically, since Echarts' native configuration items adopt a multi-layered nested object structure, there are problems such as complex path references and missing type hints when managing themes and passing parameters. In this embodiment of the invention, a standardized chart classification system and parameter specifications are established to achieve systematic management and unified invocation of business components.

[0078] Accordingly, a primary category is first established based on the core chart types of Echarts, and then secondary subcategories are made according to the display formats in actual business, forming a complete chart classification system. The specific classifications are shown in Table 1 below (including but not limited to the following types):

[0079] Table 1. Chart Classification System

[0080]

[0081]

[0082] As shown in Table 1, the chart classification system established by this invention maintains compatibility with Echarts' native types while fully considering the diverse display needs in actual business, thus achieving an organic combination of technical specifications and business practices.

[0083] Next, create a hierarchical directory structure according to this classification system. For example, create folders under the src / components / charts directory according to the first-level category (such as bar, line, pie, etc.), and create independent Vue component files (such as SingleBar.vue, MultipleBar.vue, etc.) in each folder according to the second-level subcategories, forming a clear component organization structure.

[0084] Furthermore, within each business component, Echarts configuration parameters are standardized by converting native nested object properties into flattened string parameters. For example, xAxis.axisLine.lineStyle.color is converted to xAxis_axisLine_lineStyle_color; if it is an array, xAxis[0].axisLine.lineStyle.color is converted to xAxis_0_axisLine_lineStyle_color. This design not only simplifies parameter passing but also provides a unified parameter path parsing foundation for theme management, while enhancing code readability and maintainability.

[0085] In addition, by using Vue3's expose API, the core operation methods of Echarts instances (such as getInstance, dispatchAction, etc.) are exposed to the parent component, enabling the business layer to directly call instance methods to achieve personalized interactions. This maintains the encapsulation of the component while providing the necessary extensibility.

[0086] This design, through a systematic classification system, standardized parameter definitions, and a flexible instance exposure mechanism, constructs a scalable and maintainable chart component architecture, providing strong support for visualization development in complex business scenarios.

[0087] As a preferred embodiment of the present invention, refer to Figure 4 Step S3 includes:

[0088] Step S31: Create the basic component of the unified component entry and define the parameter passing rules. The parameters include chart format parameters, chart type parameters and chart configuration item parameters.

[0089] Step S32: Preset general configuration and custom configuration based on chart type within the basic components respectively;

[0090] Step S33: Dynamically match and load the corresponding business components based on the received chart format parameters and chart type parameters;

[0091] Step S34: Register the basic component as a global component so that it can be directly called from any location in the project.

[0092] Specifically, considering the problems of complex component calls and scattered configurations in multi-chart projects, this embodiment of the invention constructs a unified component entry point and formulates standardized parameter passing interfaces to achieve centralized management and unified scheduling of all chart components, thereby reducing the complexity of component usage and maintenance costs.

[0093] Accordingly, the parameter passing specifications for the unified component entry point are first clearly defined to ensure consistency in API calls. The specific parameter passing rules are shown in Table 2 below:

[0094] Table 2 Unified Component Entry Parameter Passing Rules

[0095]

[0096] As shown in Table 2, the unified component entry point constructs a complete chart configuration interface through three core parameters: the `shape` parameter explicitly specifies the chart's visualization form, the `type` parameter determines the basic chart type, and the `option` parameter carries the specific style and data configuration. This parameter design ensures both the simplicity of the interface call and the completeness of component initialization through the setting of required fields, laying a solid foundation for subsequent dynamic component loading and configuration merging.

[0097] Secondly, a two-tier configuration system is preset within the basic components: general configuration and custom configuration. General configuration applies to all chart types and includes common style settings for basic components such as legends and tooltips; custom configuration, on the other hand, presets specific attributes for particular chart types. The specific configuration rules are shown in Table 3 below (including but not limited to the following configuration items and attributes):

[0098] Table 3 Preset Rules for Configuration Items

[0099]

[0100] As shown in Table 3, the layered configuration architecture adopted in this invention achieves an effective balance between generality and specificity. Specifically, the general configuration layer ensures that all charts maintain a unified visual style and interactive experience in basic interactive elements (such as legends and tooltips); while the custom configuration layer precisely presets the unique attributes of different chart types (such as the coordinate axes of a Cartesian coordinate system and the center position of a pie chart), which reduces the configuration burden on developers and ensures that all types of charts can achieve the best display effect. This design allows the components to maintain a unified brand style while fully adapting to the technical characteristics of different chart types.

[0101] Furthermore, referring to Figure 5 Step S33 includes:

[0102] Step S331: The basic component calculates and generates the resource identifier of the target business component based on the received chart format parameters and chart type parameters.

[0103] Step S332: Initiate a dynamic loading request based on the resource identifier. If the target business component exists, perform asynchronous loading and pass the configuration parameters to the target business component. If the target business component does not exist, trigger a degradation strategy and load the preset 404 error message component.

[0104] Step S333: Within the successfully loaded business component, the general logic hook useEcharts is automatically invoked to centrally handle core operations such as the creation and initialization of Echarts instances, resize event listening, and configuration updates, and the chart is rendered to the page.

[0105] In this way, by establishing a three-tier architecture of "unified entry route → business component loading → instantiation rendering," the logic of component scheduling and chart rendering is separated. The unified entry component focuses on parameter parsing and component routing, the business components focus on specific chart implementations, and the useEcharts hook is responsible for underlying instance management, forming a layered architecture with clearly defined responsibilities. This design ensures both the standardization and flexibility of component calls, and guarantees the consistency of chart behavior through a unified instance management mechanism, effectively solving the pain points of complex component management and scattered rendering logic in multi-chart projects.

[0106] Finally, by using Vue3's app.component global component registration method, the unified entry component is registered as a global component (e.g., component name: my-screen-echarts), which allows it to be used directly from anywhere in the project without needing to be imported separately, greatly improving development efficiency.

[0107] This design provides developers with a simple, easy-to-use, and fully functional chart component solution through a unified component entry point, a standardized configuration system, and a flexible loading mechanism. It ensures both visual consistency and meets the personalized needs of different business scenarios.

[0108] In a preferred embodiment of the present invention, the preset general configuration and the custom configuration based on the chart type in step S32 can both be fully or partially covered by the chart configuration item parameters passed from outside.

[0109] Specifically, due to the diverse and variable requirements for chart styles in actual business scenarios, preset configurations are difficult to cover all situations. In this embodiment of the invention, a configuration merging strategy is adopted, allowing externally passed option configuration items to selectively override the preset configuration as a basic template. This ensures both development efficiency and provides sufficient flexibility to meet personalized needs.

[0110] Two specific embodiments are given below to illustrate the practical application effects of the present invention:

[0111] Example 1: In a real-world project, developers only need to import the registered global component `my-screen-echarts` into their Vue file and pass in the corresponding configuration parameters via props to quickly generate charts. For example, to display a 3D bar chart, the configuration code is as follows:

[0112]

[0113] The 3D bar chart rendered based on the above configuration is as follows: Figure 6As shown, the chart clearly displays the data distribution across the five series, with "Series 1" accounting for the highest proportion at 73% and "Series 2" the lowest at 18%. The chart employs a 3D bar chart format, achieving a smooth transition during data loading through preset animation configurations, while hiding the legend to optimize layout space. The y-axis is clearly labeled with "distribution percentage," and the x-axis correctly displays the labels for the five series, demonstrating the complete functionality and excellent visual effects of this invention in 3D chart rendering.

[0114] Example 2: In a Vue 3 project, reference the my-screen-echarts component and pass configuration items via props. When the passed chart type parameter does not exist in the business component library, the system will automatically trigger a fallback strategy. The configuration code is as follows:

[0115]

[0116] The resulting chart 404 rendering is as follows: Figure 7 As shown, the page clearly displays the preset error message interface, including a clear icon and the text "icon does not exist," with a consistent overall layout. This degradation component not only provides user-friendly prompts but also maintains the visual integrity of the page, effectively avoiding white screens or layout errors caused by component loading failures. This demonstrates the invention's robust fault tolerance mechanism and user experience assurance capabilities when facing abnormal parameters.

[0117] As a preferred embodiment of the present invention, refer to Figure 1 It also includes:

[0118] Step S4: Implement performance optimization strategies in the encapsulation method. The performance optimization strategies include debouncing, asynchronous dynamic loading, and configuration merging optimization.

[0119] Specifically, considering the performance bottlenecks in multi-chart application scenarios, such as stuttering caused by frequent rendering, excessive initial resource loading, and configuration object reference conflicts, this embodiment of the invention effectively improves the running efficiency and resource utilization of chart components by systematically implementing a triple performance optimization strategy, ensuring a smooth experience in large-scale data visualization scenarios.

[0120] Accordingly, refer to Figure 8 Step S4 includes:

[0121] Step S41: Debouncing optimization is performed on the frequent update operations of the window resize event and chart configuration parameters to reduce unnecessary repeated rendering times of Echarts instance.

[0122] Step S42: Dynamically load the business component using Vue3's defineAsyncComponent method to optimize application initialization loading performance and memory usage;

[0123] Step S43: During the merging process of the chart configuration item parameters, perform a deep copy of the data to isolate the configuration object, and standardize the parameter passing parameters of the business component to define it as a flat structure of non-reference type.

[0124] Specifically, in step S41, the debounce function of lodash-es is used to debouncing the resize event and configuration update. A reasonable delay threshold (such as 300ms) is set to ensure that only the last valid rendering is executed when the event is frequently triggered, thus avoiding performance jitter caused by multiple updates in a short period of time.

[0125] In step S42, on-demand loading of components is implemented based on Vue3's defineAsyncComponent. Combined with Webpack's dynamic import feature, business components of different chart types are split into independent chunk packages. The corresponding component resources are only loaded when rendering is required, which significantly reduces the resource load during application initialization.

[0126] In step S43, the lodash-es cloneDeep method or Object.assign is used to perform a deep copy of the configuration object to ensure that the original configuration is not accidentally modified due to reference passing during the merging process. At the same time, the standardized flat parameter structure design reduces the amount of data in the deep copy operation and improves the execution efficiency of configuration merging.

[0127] As can be seen, by combining anti-jitter control, asynchronous loading, and configuration optimization into a three-pronged performance optimization scheme, this invention significantly improves the performance of chart components in scenarios with large amounts of data and multiple charts while ensuring functional integrity, providing a reliable technical guarantee for building high-performance visualization applications.

[0128] Reference Figure 9 The present invention also includes a Vue3-based Echarts component secondary encapsulation system 10, characterized in that it implements the Vue3-based Echarts component secondary encapsulation method as described above, including:

[0129] The general logic hook module 11 is used to build the general logic hook useEcharts to centrally manage the lifecycle and event response of Echarts instances;

[0130] The business component library module 12 is connected to the general logic hook module 11 and is used to store and manage multiple independent business components encapsulated according to the chart classification system.

[0131] The unified component entry module 13 is connected to the business component library module 12. It is used to construct a unified component entry, receive chart parameters passed from the outside, and dynamically load and render the corresponding business components in the business component library module 12 according to the chart parameters.

[0132] The performance optimization module 14 is connected to the unified component entry module 13 and is used to implement performance optimization strategies, including debouncing of events, asynchronous dynamic loading of components, and merging and optimizing configuration items.

[0133] Specifically, in this embodiment of the invention, the system implements full-process management of Echarts component encapsulation through a modular architecture. The general logic hook module 11, built on Vue3's Composition API, encapsulates core logic such as Echarts instance initialization, event binding, resize listening, and instance destruction. The business component library module 12 establishes a classification system according to chart type and display format, storing various pre-encapsulated business components. The unified component entry module 13 serves as the system's external interface, achieving intelligent scheduling of business components through standardized parameter reception and dynamic loading mechanisms. The performance optimization module 14 comprehensively improves system operating efficiency through debouncing control, asynchronous loading, and configuration optimization strategies. These modules form an organic whole through clear connections, jointly constructing a highly cohesive and loosely coupled visual component encapsulation solution.

[0134] In summary, this invention provides a method and system for secondary encapsulation of Echarts components based on Vue3. By constructing centralized logical hooks, implementing a standardized chart classification system, establishing a unified scheduling entry point, and implementing multi-level performance optimization strategies, a complete and efficient visualization solution is formed. Compared with existing technologies, it has the following significant advantages:

[0135] At the technical architecture level, it achieves high cohesion and low coupling in chart logic, and uses the useEcharts composite function to uniformly manage the instance lifecycle, ensuring seamless collaboration with the Vue3 framework.

[0136] In terms of development efficiency, pre-configured settings and standardized interfaces significantly reduce repetitive code, allowing developers to focus on implementing business logic.

[0137] In terms of maintainability, a unified style control mechanism and flexible extension interfaces have been established, which significantly reduces long-term maintenance costs.

[0138] In terms of performance, the robust anti-jitter processing, asynchronous loading, and memory management mechanisms ensure stable operation of the application in scenarios with large amounts of data and multiple charts.

[0139] This invention not only solves the main technical pain points currently faced by Echarts in Vue3 projects, but also provides reliable and efficient technical support for data visualization needs in complex business scenarios, and has important practical application value.

[0140] The above description is merely a preferred embodiment of the present invention and does not limit the implementation and protection scope of the present invention. Those skilled in the art should realize that any equivalent substitutions and obvious changes made based on the description and illustrations of the present invention should be included within the protection scope of the present invention.

Claims

1. A Vue3-based Echarts component secondary packaging method, characterized in that, The application relates to a method for constructing a unified component entry of an Echarts chart, and belongs to the technical field of Echarts chart construction. The method comprises the following steps: S1, constructing a general logic hook useEcharts based on a Vue3 Composition API, wherein the general logic hook useEcharts is used for centralized management of the life cycle and event response of an Echarts instance; S2, encapsulating a plurality of independent business components according to a predefined chart classification system; 2. The Vue3-based Echarts component secondary packaging method according to claim 1, wherein, S3, constructing a unified component entry, wherein the unified component entry receives externally transmitted chart parameters, and dynamically loads and renders corresponding business components according to the chart parameters.

3. The Vue3-based Echarts component secondary packaging method according to claim 2, characterized in that, The centralized management of the life cycle and event response of the Echarts instance in the step S1 comprises the creation, initialization, destruction, configuration update and window size change listening of the Echarts instance. The step S1 comprises the following steps: S11, performing ECharts instance initialization based on the readiness state checking result of a DOM node in the onMounted life cycle stage, and forcibly destroying the ECharts instance and removing the window size change event listener in the onUnmounted life cycle stage; S12, performing deep responsive monitoring on a configuration item object based on a Vue3 watch mechanism, and automatically triggering a setOption method of a chart instance when the configuration item is changed; 4. The Vue3-based Echarts component secondary packaging method according to claim 1, wherein, S13, dynamically binding differentiated event processing functions, including clicking, hovering and custom interaction logic, to the chart instance according to the transmitted chart type parameters and a predefined event mapping table. The step S2 comprises the following steps: S21, establishing the chart classification system according to the chart type and display form of Echarts; S22, creating corresponding folder directories according to the chart type according to the chart classification system, and creating independent business component files according to different display forms under each directory; S23, in each business component, normalizing the parameter passing of Echarts configuration items, and converting the original nested object attribute path into a flattened string parameter name connected by a predetermined separator; 5. The Vue3-based Echarts component secondary packaging method according to claim 1, wherein, S24, in each business component, exposing Echarts instance operation methods to the parent component through a Vue3 expose API. The step S3 comprises the following steps: S31, creating a basic component of the unified component entry and defining parameter passing rules, wherein the parameter passing comprises chart form parameters, chart type parameters and chart configuration item parameters; S32, presetting general configurations and chart type-based custom configurations in the basic component; S33, dynamically matching and loading corresponding business components according to the received chart form parameters and chart type parameters; 6. The Vue3-based Echarts component secondary packaging method according to claim 5, wherein, S34, registering the basic component as a global component.

7. The Vue3-based Echarts component secondary packaging method according to claim 5, wherein, The general configurations and chart type-based custom configurations preset in the step S32 can be fully or partially covered by externally transmitted chart configuration item parameters. The step S33 comprises the following steps: Step S331, the base component calculates and generates the resource identifier of the target business component according to the received chart form parameter and chart type parameter; Step S332, based on the resource identifier, a dynamic loading request is initiated, if the target business component exists, asynchronous loading is performed and the configuration parameter is transmitted to the target business component; if the target business component does not exist, a degradation strategy is triggered, and a preset 404 error prompt component is loaded; Step S333, in the successfully loaded business component, the general logic hook useEcharts is automatically called, the creation and initialization of Echarts instance, resize event listening and configuration update are collectively processed, and the chart is rendered to the page.

8. The Vue3-based Echarts component secondary packaging method according to claim 1, wherein, Also includes: Step S4, a performance optimization strategy is implemented in the packaging method, and the performance optimization strategy includes anti-jitter processing, asynchronous dynamic loading and configuration merging optimization.

9. The Vue3-based Echarts component secondary packaging method of claim 8, wherein, The step S4 includes: Step S41, the window resize event and the frequent update operation of the chart configuration item parameter are subjected to anti-jitter optimization processing; Step S42, the business component is dynamically loaded through the defineAsyncComponent method of Vue3; Step S43, in the merging process of the chart configuration item parameter, data deep copy is performed to isolate the configuration object, and the parameter passing parameter of the business component is specified to be a flat structure of non-reference type.

10. A Vue3-based Echarts component secondary packaging system, characterized in that, The application implements a Vue3-based Echarts component secondary packaging method according to any one of claims 1-9, comprising: A general logic hook module is used to build a general logic hook useEcharts to centrally manage the life cycle and event response of Echarts instance; A business component library module is connected to the general logic hook module and is used to store and manage a plurality of independent business components packaged according to a chart classification system; A unified component entry module is connected to the business component library module and is used to build a unified component entry, receive externally transmitted chart parameters, and dynamically load and render the corresponding business component in the business component library module according to the chart parameters; A performance optimization module is connected to the unified component entry module and is used to implement a performance optimization strategy, including anti-jitter processing of events, asynchronous dynamic loading of components and merging optimization of configuration items.

Images