vue-echarts-v3

Vue.js component wrap for ECharts.js

Installation

npm install --save echarts vue-echarts-v3

Usage

Import all charts and components

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

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"
    />
    <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, ECharts) {
              console.log(instance, ECharts);
          },
          onClick(event, instance, ECharts) {
              console.log(arguments);
          }
      }
  };
</script>

<style scoped>
  .echarts {
      width: 400px;
      height: 400px;
  }
</style>