Vue-ECharts

ECharts component for Vue.js.

Built upon ECharts 3.x & Vue.js 1.x. Vue-ECharts may not directly work in Vue.js 2.0.

Installation

Manual

Just download dist/vue-echarts.js and include it in your HTML file:

<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>

npm

$ npm install vue-echarts

bower

$ bower install vue-echarts

Registering the component

webpack + vue-loader

import ECharts from 'vue-echarts/src/components/ECharts.vue'

// register the component to use
Vue.component('chart', ECharts)

// or register in component
export default {
  components: {
    chart: ECharts
  }
}

CommonJS

var Vue = require('path/to/vue')

// requiring the UMD module
var ECharts = require('path/to/vue-echarts/dist/vue-echarts')

// or with vue-loader you can require the src directly
var ECharts = require('path/to/vue-echarts/src/components/ECharts.vue')

// register component to use
Vue.component('chart', ECharts)

AMD

require.config({
  paths: {
    'vue': 'path/to/vue',
    'vue-echarts': 'path/to/vue-conticon/dist/vue-echarts'
  }
})

require(['vue', 'vue-echarts'], function (Vue, ECharts) {
  // register component to use
  Vue.component('chart', ECharts)
})

Global variable

The component class is exposed as window.VueECharts.

// register component to use
Vue.component('chart', VueECharts)

Using the component

<template>
<chart :options="polar"></chart>
</template>

<style>
.echarts {
  height: 300px;
}
</style>

<script>
export default {
  data: function () {
    let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

    return {
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

Properties

initOptions & theme

Used to initialize ECharts instance.
options [reactive]

Used to update data for ECharts instance. Modifying this property will trigger ECharts' setOptions method.
group [reactive]

This property is automatically bound to the same property of the ECharts instance.

Instance Methods

mergeOptions (setOptions in ECharts)

Providing a better method name to describe the actual behavior of setOptions.
resize
dispatchAction
showLoading
hideLoading
getDataURL
clear
dispose

Static Methods

connect
disconnect
registerMap
registerTheme

You can refer to ECharts' API to learn how to use the methods above.

Local development

$ npm i
$ npm run dev

Open http://localhost:8080/demo to see the demo.

License

JackEasons/vue-echarts

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages