node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

vue-echarts-v3

vue-echarts-v3 npm vue2 echarts3

Vue.js v2.x+ component wrap for ECharts.js v3.x+

Feature

  1. Lightweight, efficient, on-demand binding events;
  2. Support for importing ECharts.js charts and components on demand;
  3. Support component resize event auto update view;

Installation

$ npm install --save echarts vue-echarts-v3

Usage

  1. Change webpack config

    For webpack 1.x:

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

    For webpack 2.x+:

          {
            test: /\.js$/,
            loader: 'babel-loader',
    -       include: [resolve('src'), resolve('test')]
    +       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
          }
  2. Import all charts and components

    import IEcharts from 'vue-echarts-v3/src/full.js';
  3. Import ECharts.js modules manually to reduce bundle size

    import IEcharts from 'vue-echarts-v3/src/lite.js';
     
    // import 'echarts/lib/chart/line';
    import 'echarts/lib/chart/bar';
    // import 'echarts/lib/chart/pie';
    // import 'echarts/lib/chart/scatter';
    // import 'echarts/lib/chart/radar';
     
    // import 'echarts/lib/chart/map';
    // import 'echarts/lib/chart/treemap';
    // import 'echarts/lib/chart/graph';
    // import 'echarts/lib/chart/gauge';
    // import 'echarts/lib/chart/funnel';
    // import 'echarts/lib/chart/parallel';
    // import 'echarts/lib/chart/sankey';
    // import 'echarts/lib/chart/boxplot';
    // import 'echarts/lib/chart/candlestick';
    // import 'echarts/lib/chart/effectScatter';
    // import 'echarts/lib/chart/lines';
    // import 'echarts/lib/chart/heatmap';
     
    // import 'echarts/lib/component/graphic';
    // import 'echarts/lib/component/grid';
    // import 'echarts/lib/component/legend';
    // import 'echarts/lib/component/tooltip';
    // import 'echarts/lib/component/polar';
    // import 'echarts/lib/component/geo';
    // import 'echarts/lib/component/parallel';
    // import 'echarts/lib/component/singleAxis';
    // import 'echarts/lib/component/brush';
     
    import 'echarts/lib/component/title';
     
    // import 'echarts/lib/component/dataZoom';
    // import 'echarts/lib/component/visualMap';
     
    // import 'echarts/lib/component/markPoint';
    // import 'echarts/lib/component/markLine';
    // import 'echarts/lib/component/markArea';
     
    // import 'echarts/lib/component/timeline';
    // import 'echarts/lib/component/toolbox';
     
    // import 'zrender/lib/vml/vml';

Using the component

<template>
  <div class="echarts">
    <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
    <button @click="doRandom">Random</button>
  </div>
</template>
 
<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data: () => ({
      loading: true,
      bar: {
        title: {
          text: 'ECharts Hello World'
        },
        tooltip: {},
        xAxis: {
          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
        },
        yAxis: {},
        series: [{
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }),
    methods: {
      doRandom() {
        const that = this;
        let data = [];
        for (let i = 0, min = 5, max = 99; i < 6; i++) {
          data.push(Math.floor(Math.random() * (max + 1 - min) + min));
        }
        that.loading = !that.loading;
        that.bar.series[0].data = data;
      },
      onReady(instance) {
        console.log(instance);
      },
      onClick(event, instance, echarts) {
        console.log(arguments);
      }
    }
  };
</script>
 
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

Properties

  • styles

    Optional; CSS style is { width: 100%; height: 100%; } by default.

  • initOpts & theme

    Optional; Used to initialize ECharts instance.

  • option [reactive]

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

  • group [reactive]

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

  • notMerge

    Optional; false by default. Detail

  • lazyUpdate

    Optional; false by default. Detail

  • loading [reactive]

    Optional; false by default. Modifying this property will trigger ECharts' showLoading or hideLoading method.

  • loadingOpts

    Optional; Detail

  • resizable

    Optional; false by default.

See more ECharts' Option

Instance Methods

  • resize
  • update
  • mergeOption
  • dispatchAction
  • convertToPixel
  • convertFromPixel
  • containPixel
  • showLoading
  • hideLoading
  • getDataURL
  • getConnectedDataURL
  • clear

Static Methods

  • connect
  • disConnect
  • dispose
  • getInstanceByDom
  • registerMap
  • getMap
  • registerTheme

Learn more ECharts' API

Demo

vue-echarts-v3-demo

License

MIT