@yassidev/vue-echarts

Vue + ECharts = 🚀

This package is a wrapper around Apache Echarts to allow for creating complex charts with the simplicity of Vue SFCs.

Features

• [x] ECharts wrapper component
• [x] Auto-generation of components for all options
• [x] Auto-generation of components for all series
• [x] Auto-generation of components for all shapes
• [x] Global components injection using plugin
• [x] Separate components by concern
• [x] Fully typed components

Installation

npm install echarts @yassidev/vue-echarts

You can then either install the plugin in your Vue app and get all components globally registered:

import VueEcharts from '@yassidev/vue-echarts'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(VueEcharts).mount('#app')

Or you can import each component separately:

<script setup lang="ts">
import { ECharts, OptionXAxis, SeriesBar } from '@yassidev/vue-echarts/components'
import { YAxis } from '@yassidev/vue-echarts/components/options'
</script>

<template>
    <ECharts>
        <OptionXAxis />
        <YAxis />
        <SeriesBar />
    </ECharts>
</template>

That's it!

Options

You may pass any option you would set in your ECharts configuration as props on each component. Those props are reactive and will trigger a lazy re-rendering of the chart.

<script setup lang="ts">
const data = ref([3, 4, 2, 2])
</script>

<template>
    <ECharts>
        <OptionXAxis :show="false" />
        <OptionYAxis name="My Y Axis" />
        <SeriesBar :data="data" />
    </ECharts>
</template>

You can also pass nested props using a colon notation.

<script setup lang="ts">
const data = ref([3, 4, 2, 2])
</script>

<template>
    <ECharts>
        <OptionXAxis axis-label:align:="center" />
        <!-- OR -->
         <OptionXAxis :axis-label="{ align: 'center' }" />
    </ECharts>
</template>

Custom Series

Custom series are often complex as they need a renderItem method to return all custom elements to be rendered. Using components makes it a little easier:

<script setup lang="ts">
const data = ref([3, 4, 2, 2])
const color = ref('red')
</script>

<template>
    <ECharts  v-slot="{ width }">
        <SeriesCustom :data="data" coordinate-system="none" v-slot="{ index, item, api, params, length}">
            <ShapeGroup :x="index * width/length">
                <ShapeRect style:fill="blue" :shape="{ width: width/length, height: width/length }" />
                <ShapeText>
                    Simple text
                </ShapeText>
                <ShapeText :style:rich:title:fill="color">
                    <span name="title">more complex</span>
                    <span>text</span>
                </ShapeText>
            </ShapeGroup>
        </SeriesCustom>
    </ECharts>
</template>