Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/xlsdg/vue-echarts-v3

Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
https://github.com/xlsdg/vue-echarts-v3

chart echarts library visualization vue vue-component vue-echarts vuejs

Last synced: 2 months ago
JSON representation

Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)

Lists

README 

        
# vue-echarts-v3 [![npm](https://img.shields.io/npm/v/vue-echarts-v3.svg)](https://www.npmjs.com/package/vue-echarts-v3) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)](http://echarts.baidu.com/)



> [Vue.js](https://vuejs.org/) `v2.x+` component wrap for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) `v3.x+`



## Feature



1. Lightweight, efficient, on-demand binding events;

2. Support for importing ECharts.js charts and components on demand;

3. Support component resize event auto update view;



## Installation



```bash

$ npm install --save echarts vue-echarts-v3

```



## Usage



0. Change webpack config



    For webpack 1.x:



    ```diff

          {

            test: /\.js$/,

            loader: 'babel',

            include: [

    -          path.join(prjRoot, 'src')

    +          path.join(prjRoot, 'src'),

    +          path.join(prjRoot, 'node_modules/vue-echarts-v3/src')

            ],

    -        exclude: /node_modules/

    +        exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/

          },

    ```



    For webpack 2.x+:



    ```diff

          {

            test: /\.js$/,

            loader: 'babel-loader',

    -       include: [resolve('src'), resolve('test')]

    +       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]

          }

    ```



1. Import all charts and components



    ```javascript

    import IEcharts from 'vue-echarts-v3/src/full.js';

    ```



2. Import ECharts.js modules manually to reduce bundle size



    ```javascript

    import IEcharts from 'vue-echarts-v3/src/lite.js';



    // import 'echarts/lib/chart/line';

    import 'echarts/lib/chart/bar';

    // import 'echarts/lib/chart/pie';

    // import 'echarts/lib/chart/scatter';

    // import 'echarts/lib/chart/radar';



    // import 'echarts/lib/chart/map';

    // import 'echarts/lib/chart/treemap';

    // import 'echarts/lib/chart/graph';

    // import 'echarts/lib/chart/gauge';

    // import 'echarts/lib/chart/funnel';

    // import 'echarts/lib/chart/parallel';

    // import 'echarts/lib/chart/sankey';

    // import 'echarts/lib/chart/boxplot';

    // import 'echarts/lib/chart/candlestick';

    // import 'echarts/lib/chart/effectScatter';

    // import 'echarts/lib/chart/lines';

    // import 'echarts/lib/chart/heatmap';



    // import 'echarts/lib/component/graphic';

    // import 'echarts/lib/component/grid';

    // import 'echarts/lib/component/legend';

    // import 'echarts/lib/component/tooltip';

    // import 'echarts/lib/component/polar';

    // import 'echarts/lib/component/geo';

    // import 'echarts/lib/component/parallel';

    // import 'echarts/lib/component/singleAxis';

    // import 'echarts/lib/component/brush';



    import 'echarts/lib/component/title';



    // import 'echarts/lib/component/dataZoom';

    // import 'echarts/lib/component/visualMap';



    // import 'echarts/lib/component/markPoint';

    // import 'echarts/lib/component/markLine';

    // import 'echarts/lib/component/markArea';



    // import 'echarts/lib/component/timeline';

    // import 'echarts/lib/component/toolbox';



    // import 'zrender/lib/vml/vml';

    ```



## Using the component



```vue



  


    

    Random

  



  import IEcharts from 'vue-echarts-v3/src/full.js';

  export default {

    name: 'view',

    components: {

      IEcharts

    },

    props: {

    },

    data: () => ({

      loading: true,

      bar: {

        title: {

          text: 'ECharts Hello World'

        },

        tooltip: {},

        xAxis: {

          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']

        },

        yAxis: {},

        series: [{

          name: 'Sales',

          type: 'bar',

          data: [5, 20, 36, 10, 10, 20]

        }]

      }

    }),

    methods: {

      doRandom() {

        const that = this;

        let data = [];

        for (let i = 0, min = 5, max = 99; i < 6; i++) {

          data.push(Math.floor(Math.random() * (max + 1 - min) + min));

        }

        that.loading = !that.loading;

        that.bar.series[0].data = data;

      },

      onReady(instance, ECharts) {

        console.log(instance, ECharts);

      },

      onClick(event, instance, ECharts) {

        console.log(arguments);

      }

    }

  };



  .echarts {

    width: 400px;

    height: 400px;

  }



```



## Properties



* `styles`



  Optional; CSS style is `{ width: 100%; height: 100%; }` by default.



* `initOpts` & `theme`



  Optional; Used to initialize ECharts instance.



* `option` **[reactive]**



  Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOptions` method.



* `group` **[reactive]**



  Optional; This property is automatically bound to the same property of the ECharts instance.



* `notMerge`



  Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)



* `lazyUpdate`



  Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)



* `loading` **[reactive]**



  Optional; `false` by default. Modifying this property will trigger ECharts' `showLoading` or `hideLoading` method.



* `loadingOpts`



  Optional; [Detail](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.showLoading)



* `resizable`



  Optional; `false` by default.



See more [ECharts' Option](http://echarts.baidu.com/option.html)



## Instance Methods



* `resize`

* `update`

* `mergeOption`

* `dispatchAction`

* `convertToPixel`

* `convertFromPixel`

* `containPixel`

* `showLoading`

* `hideLoading`

* `getDataURL`

* `getConnectedDataURL`

* `clear`



## Static Methods



* `connect`

* `disConnect`

* `dispose`

* `getInstanceByDom`

* `registerMap`

* `getMap`

* `registerTheme`



Learn more [ECharts' API](http://echarts.baidu.com/api.html)



## Demo



[vue-echarts-v3-demo](https://github.com/xlsdg/vue-echarts-v3-demo)



# License



MIT