EChartsVue

A simple Vue wrapper for ECharts.

Works for Vue 2 & 3.

dependencies

• VueDemi
• VueResizeSensor

setup

npm

npm i @seregpie/echarts-vue

import {VueChart} from '@seregpie/echarts-vue';

browser

<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/@seregpie/vue-resize-sensor"></script>
<script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>
<script src="https://unpkg.com/@seregpie/echarts-vue"></script>

The module is globally available as EChartsVue.

usage

Register the component globally.

import {createApp} from 'vue';
import {VueChart} from '@seregpie/echarts-vue';

let app = createApp({/*...*/});
app.component(VueChart.name, VueChart);
app.mount('body');

or

Register the component locally.

import {VueChart} from '@seregpie/echarts-vue';

export default {
  components: {
    VueChart,
  },
  // ...
};

<template>
  <vue-chart
    style="width: 600px; height: 400px"
    :options="chartOptions"
  />
</template>
<script>
import {BarChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';
import {use} from 'echarts/core';
use([
  BarChart,
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
]);

export default {
  data() {
    return {
      products: [
        {name: 'shirt', sales: 5},
        {name: 'cardigan', sales: 20},
        {name: 'chiffon shirt', sales: 36},
        {name: 'pants', sales: 10},
        {name: 'heels', sales: 10},
        {name: 'socks', sales: 20},
      ],
    };
  },
  computed: {
    chartOptions() {
      let {products} = this;
      return {
        title: {
          text: 'My Little Shop',
        },
        tooltip: {},
        xAxis: {
          data: products.map(({name}) => name),
        },
        yAxis: {},
        series: {
          name: 'sales',
          data: products.map(({sales}) => sales),
          type: 'bar',
        },
      };
    },
  },
};
</script>