/vue-echarts

ECharts component for Vue.js.

Primary LanguageJavaScriptMIT LicenseMIT

Vue-ECharts

ECharts component for Vue.js.

Built upon ECharts v3.3.2+ and depends on Vue.js v2.0.1+.

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

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>

Usage

ES Modules with NPM & vue-loader (Recommended)

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

// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// register component to use

Heads up (before v2.3.4)

If you are using vue-cli to create your project and you want to use the untranspiled component (import vue-echarts/components/ECharts rather than import vue-echarts directly, to optimize bundle size), the webpack template may exclude node_modules from files to be transpiled by Babel. To fix this problem, try change build/webpack.base.conf.js like this:

For Webpack1:

      {
        test: /\.js$/,
        loader: 'babel',
        include: [
-          path.join(projectRoot, 'src')
+          path.join(projectRoot, 'src'),
+          path.join(projectRoot, 'node_modules/vue-echarts')
        ],
-        exclude: /node_modules/
+        exclude: /node_modules(?![\\/]vue-echarts[\\/])/
      },

For Webpack2:

      {
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts')]
      }

CommonJS with NPM without ES Next support

var Vue = require('vue')

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

// or with vue-loader you can require the src directly
// and import ECharts modules manually to reduce bundle size
var ECharts = require('vue-echarts/components/ECharts.vue')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')

// register component to use

AMD

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

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>

See more examples here.

Props

  • initOptions

    theme [reactive]

    Used to initialize ECharts instance.

  • options [reactive]

    Used to update data for ECharts instance. Modifying this property will trigger ECharts' setOption method.

  • group [reactive]

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

  • auto-resize

    This property indicates ECharts instance should be resized automatically whenever the window is resized.

Computed

  • width [reactive] [readonly]

    Used to retrieve the current width of the chart instance.

  • height [reactive] [readonly]

    Used to retrieve the current height of the chart instance.

  • computedOptions [reactive] [readonly]

    Used to retrive the actual options calculated by ECharts after updating options.

Methods

  • mergeOptions (use setOption in ECharts under the hood)

    Provides a better method name to describe the actual behavior of setOption.

  • resize

  • dispatchAction

  • showLoading

  • hideLoading

  • convertToPixel

  • convertFromPixel

  • containPixel

  • getDataURL

  • getConnectedDataURL

  • clear

  • dispose

Static Methods

  • connect
  • disconnect
  • registerMap
  • registerTheme

Events

Vue-ECharts support the following events:

  • legendselectchanged
  • legendselected
  • legendunselected
  • datazoom
  • datarangeselected
  • timelinechanged
  • timelineplaychanged
  • restore
  • dataviewchanged
  • magictypechanged
  • geoselectchanged
  • geoselected
  • geounselected
  • pieselectchanged
  • pieselected
  • pieunselected
  • mapselectchanged
  • mapselected
  • mapunselected
  • axisareaselected
  • focusnodeadjacency
  • unfocusnodeadjacency
  • brush
  • brushselected
  • Mouse events
    • click
    • dblclick
    • mouseover
    • mouseout
    • mousedown
    • mouseup
    • globalout

For further details, see ECharts' API documentation.

Local development

$ npm i
$ npm run dev

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