Normal Polygamous Marriage

    echarts-vue

    1.1.5 • Public • Published

    echarts-vue

    Echarts(3.x) component for vue.js(2.x)

    Features

    1. Simple, lightweight, efficient, scalable;
    2. Provide a feature to import Echarts.js components on demand;
    3. Provide a feature to bind events on-demand;
    4. Provide an optimized resize event for updating view;
    5. Provide an extension method (invoke) to deal with the future api of echarts.

    Installation

    Currently there are three ways to install the echarts-vue component for your application.

    1. Manual

    Download and copy the echarts-vue bundle file (v-echarts-full.js) into your project, then include it in your HTML file. eg.

    <script type="text/javascript" src="./v-echarts-full.js"></script>
    

    2. npm

    npm install echarts-vue
    

    3. bower

    bower install echarts-vue
    

    Usage

    1. Manual

    Download (vue.min.js) and (v-echarts-full.js), then include them in your HTML file (eg. index.html). eg.

    <!DOCTYPE html>
    <html>
    <head>
        <title>echarts-vue</title>
        <script type="text/javascript" src="./vue.min.js"></script>
        <script type="text/javascript" src="./v-echarts-full.js"></script>
    </head>
    <body>
    <div id="app">
        {{ message }}
        <echarts :option="option" style="width: 50%; height: 400px;"></echarts>
      </div>
    
      <script>
        ECharts.default.install(Vue)
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!',
            option: {
                title: {
                    text: 'ECharts-vue entry example'
                },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: ['shirt','cardign','chiffon shirt','pants','heels','socks']
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
          }
        })
      </script>
    </body>
    </html>
    

    Then, you can open index.html in your chrome.

    2. ES modules with npm & vue-loader (Recommended)

    importing echarts on demand

    import & register

    import Echarts from 'echarts-vue'
    Echarts.install(Vue)
    

    In main.js file which will look like:

    import Vue from 'vue'
    import App from './App.vue'
    
    // import & register
    import Echarts from 'echarts-vue'
    Echarts.install(Vue)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: {
        demo: App
      },
      render: h => h(App)
    })
    

    In App.vue file which will look like:

    <template>
      <div>
        <echarts :option="option" :events="events" style="width:50%;height:420px;"></echarts>
     </div>
     </template>
    
    <script>
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/legend'
    import 'echarts/lib/component/title'
    
    export default {
      data () {
        return {
          option: {
                title: {
                    text: 'ECharts-vue entry example'
                },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: ['shirt','cardign','chiffon shirt','pants','heels','socks']
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            },
            events: {
                click: this.click
            }
        }
      },
      methods: {
          click (data) {
              console.log(data)
          }
      }
    }
    </script>
    

    3. ES modules with npm & vue-loader (with full echarts bundle, not recommended)

    In main.js file which will look like:

    import Vue from 'vue'
    import App from './App.vue'
    
    // import & register
    import Echarts from 'echarts-vue/src/components/echarts/index-full.js'
    Echarts.install(Vue)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: {
        demo: App
      },
      render: h => h(App)
    })
    

    In App.vue file which will look like:

    <template>
      <div>
        <echarts :option="option" :events="events" style="width:50%;height:420px;"></echarts>
     </div>
     </template>
    
    <script>
    
    export default {
      data () {
        return {
          option: {
                title: {
                    text: 'ECharts-vue entry example'
                },
                tooltip: {},
                legend: {
                    data:['Sales']
                },
                xAxis: {
                    data: ['shirt','cardign','chiffon shirt','pants','heels','socks']
                },
                yAxis: {},
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            },
            events: {
                click: this.click
            }
        }
      },
      methods: {
          click (data) {
              console.log(data)
          }
      }
    }
    </script>
    

    Properties

    • option [required, reactive]

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

    • events [Optional]

    Event-handling functions are mainly added through on in ECharts. Binding events on demand. The events object will look like:

    {
      "click": handler_function(){},
      "dblclick": handler_function(){},
      "mouseover": handler_function(){},
      "mouseout": handler_function(){},
      "mousedown": handler_function(){},
      "mouseup": handler_function(){},
      "globalout": handler_function(){},
      ......
    }
    
    • theme & opts [Optional]

    Used to creates an ECharts instance theme : [Optional] Theme to be applied. This can be a configuring object of a theme, or a theme name registered through echarts.registerTheme.

    opts : [Optional]

    which may contain:

    devicePixelRatio : Ratio of one physical pixel to the size of one device independent pixels. Browser's window.devicePixelRatio is used by default.

    renderer : The renderer only supports 'canvas' by now. width : Specify width explicitly, in pixel. If setting to null/undefined/'auto', width of dom (instance container) will be used. height : Specify height explicitly, in pixel. If setting to null/undefined/'auto', height of dom (instance container) will be used.

    • group [Optional]

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

    • not-merge [Optional, default: true]

      This property indicates ECharts states whether not to merge with previous option; true by defualt, stating not merging.

    • lazy-update [Optional, default: false]

      This property indicates ECharts states whether not to update chart immediately; false by defualt, stating update immediately.

    • auto-resize [Optional, default: true]

      This property indicates ECharts instance should be resized automatically whenever the window is resized.

    Instance Methods

    • getGroup
    • setOption [ user should not call this method in most cases ]
    • getWidth
    • getHeight
    • getDom
    • getOption
    • resize [ user should not call this method in most cases, invoked by instance automatically ]
    • dispatchAction
    • on
    • off
    • convertToPixel
    • convertFromPixel
    • containPixel
    • showLoading
    • hideLoading
    • getDataURL
    • getConnectedDataURL
    • clear [ user should not call this method in most cases]
    • isDisposed
    • dispose [ invoked by echarts-vue component, user should not call this method ]
    • invoke [ This method like a reflection method in Java. The invoke method provides strong ability to cater to the future method of Echarts. ]
    // invoke usage:
    
    echartsVueComponent.invoke('setOption', option, notMerge, lazyUpdate)
    
    // is equivalent to
    
    echartsVueComponent.setOption(option, notMerge, lazyUpdate)
    

    Static Methods

    • connect
    • disconnect
    • dispose
    • registerMap
    • getMap
    • registerTheme
    • clipPointsByRect
    • clipRectByRect

    Events

    ECharts-Vue support the following events:

    • Mouse events

      • click
      • dblclick
      • mouseover
      • mouseout
      • mousedown
      • mouseup
      • globalout
    • legendselectchanged

    • legendselected

    • legendunselected

    • datazoom

    • datarangeselected

    • timelinechanged

    • timelineplaychanged

    • restore

    • dataviewchanged

    • magictypechanged

    • geoselectchanged

    • geoselected

    • geounselected

    • pieselectchanged

    • pieselected

    • pieunselected

    • mapselectchanged

    • mapselected

    • mapunselected

    • axisareaselected

    • brush

    • brushselected

    For further details, see [ECharts' API documentation].

    Build Setup & Local Development

    # install dependencies
    npm install
     
    # serve examples with hot reload at localhost:8080
    npm run dev
     
    # build for production with minification (v-echarts-full.js)
    npm run dist
     
     

    Install

    npm i echarts-vue

    DownloadsWeekly Downloads

    2

    Version

    1.1.5

    License

    Apache-2.0

    Last publish

    Collaborators

    • yongxing510