Nimoy Prospers Mystically

    vue-echarts-v3

    2.0.1 • Public • Published

    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"
        />
        <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>

    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

    Install

    npm i vue-echarts-v3

    DownloadsWeekly Downloads

    1,489

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    273 kB

    Total Files

    12

    Last publish

    Collaborators

    • xlsdg