echarts-vue

v1.1.5

Published

2 years ago

ECharts(3.x) component for Vue.js(2.x)

Downloads

0High
0Medium
0Low

yongxing510

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

echarts-vue

Features

Installation

Usage

In main.js file which will look like:

In App.vue file which will look like:

In main.js file which will look like:

In App.vue file which will look like:

Properties

Instance Methods

Static Methods

Events

Build Setup & Local Development