Overview

The vue-echarts-v3 is a Vue.js component designed to wrap Apache ECharts (incubating) v3.x+ for use in Vue.js v2.x+ applications. It offers lightweight and efficient integration of ECharts.js charts and components with on-demand binding events and support for component resize event auto-update view.

Features

• Lightweight: The component provides a lightweight integration of ECharts.js charts and components.
• On-demand binding events: It supports binding events only when needed, improving efficiency.
• Importing ECharts.js charts and components on demand: The component allows for importing ECharts.js charts and components as needed, reducing bundle size.
• Support for component resize event auto update view: The component automatically updates the view when a resize event is triggered on the component.

Installation

To install the vue-echarts-v3 component, you need to follow these steps:

1. Change webpack config:

   • For webpack 1.x:

     const webpackConfig = {
       //...
     };
     

   • For webpack 2.x+:

     const webpackConfig = {
       //...
     };
     

2. Import all charts and components:

   import Vue from 'vue';
   import 'vue-echarts-v3/dist/vue-echarts-v3.css';
   import ECharts from 'vue-echarts-v3';
   
   Vue.component('v-chart', ECharts);
   

3. Import ECharts.js modules manually to reduce bundle size:

   import Vue from 'vue';
   import 'vue-echarts-v3/dist/vue-echarts-v3.css';
   import ECharts from 'vue-echarts-v3/dist/vue-echarts-v3.common.js';
   
   Vue.component('v-chart', ECharts);
   

4. Configure component properties and styles (optional):

   <v-chart :styles="{ width: '100%', height: '100%' }"></v-chart>
   

5. Configure initOpts and theme properties (optional):

   <v-chart :initOpts="initOpts" :theme="theme"></v-chart>
   

6. Use option property to update data for the ECharts instance:

   <v-chart :option="option"></v-chart>
   

7. Use group property (optional):

   <v-chart :group="group"></v-chart>
   

8. Use notMerge property (optional):

   <v-chart :notMerge="notMerge"></v-chart>
   

9. Use lazyUpdate property (optional):

   <v-chart :lazyUpdate="lazyUpdate"></v-chart>
   

10. Use loading property to trigger ECharts’ showLoading or hideLoading method (optional):

    <v-chart :loading="loading" :loadingOpts="loadingOpts"></v-chart>
    

11. Use resizable property:

    <v-chart :resizable="resizable"></v-chart>
    

Summary

The vue-echarts-v3 is a Vue.js component that wraps Apache ECharts v3.x+, providing a lightweight and efficient way to integrate ECharts.js charts and components into Vue.js applications. It offers on-demand binding events, support for importing ECharts.js charts and components as needed, and automatic view updates on component resize events. The installation process involves configuring the webpack, importing the necessary modules, and setting up component properties and styles. Various properties are available for customization, such as initOpts, theme, option, group, notMerge, lazyUpdate, loading, and resizable.