ve

vue2-echarts

A Vue.js project

Showing:

Popularity

Downloads/wk

4

Maintenance

No Maintenance Data Available

Package

Dependencies

2

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Vue2-ECharts

ECharts component for Vue.js.

Built upon ECharts 3.x & Vue.js 2.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 vue2-echarts

bower

$ bower install vue2-echarts

Registering the component

webpack + vue-loader

import ECharts from 'vue2-echarts/src/ECharts/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/vue2-echarts/dist/vue-echarts')

// or with vue-loader you can require the src directly
var ECharts = require('path/to/vue2-echarts/src/ECharts/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/ to see the demo.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial