w-echarts-vue

w-echarts-vue

A vue component for echarts.

Echarts(full build) and echarts-gl(3D charts) are bundled in this package, no need to load them from cdn.

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all components: web [source code]

Installation

Using npm(ES6 module):

npm i w-echarts-vue

Import component(UMD module):

//choose component
<w-echarts-vue
    ...
></w-echarts-vue>

//import
import WEchartsVue from 'w-echarts-vue'

//component
Vue.component('w-echarts-vue',WEchartsVue)

Import component(source code):

//choose component
<w-echarts-vue
    ...
></w-echarts-vue>

//import
import WEchartsVue from 'w-echarts-vue/src/components/WEchartsVue.vue'

//component
Vue.component('w-echarts-vue',WEchartsVue)
//or
export default {
    components: {
        WEchartsVue,
        //or
        'w-echarts-vue': WEchartsVue,
    },
    ...
}

In a browser(UMD module):

Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>

Add script for w-echarts-vue.

<script src="https://cdn.jsdelivr.net/npm/w-echarts-vue@1.0.19/dist/w-echarts-vue.umd.js"></script>

Directly use:

//app and component
<div id="app">
    <w-echarts-vue
        ...
    ></w-echarts-vue>
</div>

//component
Vue.component('w-echarts-vue', window['w-echarts-vue'])

//new
new Vue({
    el: '#app',
    data: {
        ...
    }
})

Components

The component has no default height, remember to give it a size:

<w-echarts-vue
    style="width:620px; height:300px;"
    :options="options"
></w-echarts-vue>

All echarts events(click, legendselectchanged, datazoom, finished...) are forwarded:

<w-echarts-vue
    :options="options"
    @click="ev=>{console.log('click',ev)}"
    @finished="()=>{console.log('finished')}"
></w-echarts-vue>

Use getChart for accessing the inner chart instance:

//template
<w-echarts-vue
    ref="ec"
    :options="options"
></w-echarts-vue>

//chart, an instance of echarts.ECharts, returns null before initialization
let chart = this.$refs.ec.getChart()