vue-echarts-v3

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

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

Usage

0. Change webpack config

   For webpack 1.x:

   1      {
   2        test: /\.js$/,
   3        loader: 'babel',
   4        include: [
   5-          path.join(prjRoot, 'src')
   6+          path.join(prjRoot, 'src'),
   7+          path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
   8        ],
   9-        exclude: /node_modules/
   10+        exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
   11      },

   For webpack 2.x+:

   1      {
   2        test: /\.js$/,
   3        loader: 'babel-loader',
   4-       include: [resolve('src'), resolve('test')]
   5+       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
   6      }

1. Import all charts and components

   1import IEcharts from 'vue-echarts-v3/src/full.js';

2. Import ECharts.js modules manually to reduce bundle size

   1import IEcharts from 'vue-echarts-v3/src/lite.js';
   2
   3// import 'echarts/lib/chart/line';
   4import 'echarts/lib/chart/bar';
   5// import 'echarts/lib/chart/pie';
   6// import 'echarts/lib/chart/scatter';
   7// import 'echarts/lib/chart/radar';
   8
   9// import 'echarts/lib/chart/map';
   10// import 'echarts/lib/chart/treemap';
   11// import 'echarts/lib/chart/graph';
   12// import 'echarts/lib/chart/gauge';
   13// import 'echarts/lib/chart/funnel';
   14// import 'echarts/lib/chart/parallel';
   15// import 'echarts/lib/chart/sankey';
   16// import 'echarts/lib/chart/boxplot';
   17// import 'echarts/lib/chart/candlestick';
   18// import 'echarts/lib/chart/effectScatter';
   19// import 'echarts/lib/chart/lines';
   20// import 'echarts/lib/chart/heatmap';
   21
   22// import 'echarts/lib/component/graphic';
   23// import 'echarts/lib/component/grid';
   24// import 'echarts/lib/component/legend';
   25// import 'echarts/lib/component/tooltip';
   26// import 'echarts/lib/component/polar';
   27// import 'echarts/lib/component/geo';
   28// import 'echarts/lib/component/parallel';
   29// import 'echarts/lib/component/singleAxis';
   30// import 'echarts/lib/component/brush';
   31
   32import 'echarts/lib/component/title';
   33
   34// import 'echarts/lib/component/dataZoom';
   35// import 'echarts/lib/component/visualMap';
   36
   37// import 'echarts/lib/component/markPoint';
   38// import 'echarts/lib/component/markLine';
   39// import 'echarts/lib/component/markArea';
   40
   41// import 'echarts/lib/component/timeline';
   42// import 'echarts/lib/component/toolbox';
   43
   44// import 'zrender/lib/vml/vml';

Using the component

1<template>
2  <div class="echarts">
3    <IEcharts
4      :option="bar"
5      :loading="loading"
6      @ready="onReady"
7      @click="onClick"
8    />
9    <button @click="doRandom">Random</button>
10  </div>
11</template>
12
13<script type="text/babel">
14  import IEcharts from 'vue-echarts-v3/src/full.js';
15  export default {
16    name: 'view',
17    components: {
18      IEcharts
19    },
20    props: {
21    },
22    data: () => ({
23      loading: true,
24      bar: {
25        title: {
26          text: 'ECharts Hello World'
27        },
28        tooltip: {},
29        xAxis: {
30          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
31        },
32        yAxis: {},
33        series: [{
34          name: 'Sales',
35          type: 'bar',
36          data: [5, 20, 36, 10, 10, 20]
37        }]
38      }
39    }),
40    methods: {
41      doRandom() {
42        const that = this;
43        let data = [];
44        for (let i = 0, min = 5, max = 99; i < 6; i++) {
45          data.push(Math.floor(Math.random() * (max + 1 - min) + min));
46        }
47        that.loading = !that.loading;
48        that.bar.series[0].data = data;
49      },
50      onReady(instance, ECharts) {
51        console.log(instance, ECharts);
52      },
53      onClick(event, instance, ECharts) {
54        console.log(arguments);
55      }
56    }
57  };
58</script>
59
60<style scoped>
61  .echarts {
62    width: 400px;
63    height: 400px;
64  }
65</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