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
 
 

Dependents (0)

Package Sidebar

Install

npm i echarts-vue

Weekly Downloads

12

Version

1.1.5

License

Apache-2.0

Last publish

Collaborators

  • yongxing510