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/[email protected]/dist/vue.min.js"></script>

Add script for w-echarts-vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

| component | tag | description | | --- | --- | --- | | WEchartsVue | w-echarts-vue | Echarts chart, use options for echarts settings |

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()