Echarts-vue NPM

echarts-vue

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

Features

Simple, lightweight, efficient, scalable;
Provide a feature to import Echarts.js components on demand;
Provide a feature to bind events on-demand;
Provide an optimized resize event for updating view;
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

echarts-vue vue-echarts v-echarts Vue ECharts Vue.js chart

axios echarts lodash.debounce vue vue-router vuex

@infinitebrahmanuniverse/nolb-ech @everything-registry/sub-chunk-1551

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago