Usage - Nuxt ECharts - Nuxt Module for Apache ECharts™

Import ECharts

Shrinking Bundle Size

You can use the tree-shakable module configuration provided by Nuxt ECharts to bundle to the required components and get a minimal bundle.

Or you can leave the module configuration empty and import the required components in your source code:

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';

// Import bar charts, all suffixed with Chart
import { BarChart } from 'echarts/charts';

// Import the tooltip, rectangular coordinate system and dataset components
import {
  TooltipComponent,
  GridComponent,
  DatasetComponent,
} from 'echarts/components';

// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';

// Register the required components
echarts.use([
  BarChart,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LabelLayout,
  UniversalTransition,
]);

By default, Nuxt ECharts only includes canvas renderer.

Import All ECharts Functionality

Not recommended but if you really want to import the whole ECharts bundle without having to select required features manually, just add this in your code:

import 'echarts'

After importing ECharts, you can use <VChart> component anywhere in your Nuxt app. All the components provided by Nuxt ECharts are auto-imported with automatic tree-shaking. You don't need to import them explicilty in your source code.

Normally, <VChart> covers most usage scenarios which renders the chart dynamically in the browser and will re-render after user interactions. However, there are specific scenarios where we also need to render charts on the server side.

TypeScript

A minimal EChartsOption type will be generated depending on your module configuration. This type will be stricter than the default one provided because it will know exactly what components are being used.

For example, the following configuration,

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-echarts'],
  echarts: {
    charts: ['BarChart'],
    components: ['DatasetComponent', 'GridComponent', 'TooltipComponent'],
  },
})

will generate the following type:

app/.nuxt/types/nuxt-echarts.d.ts

// Generated by nuxt-echarts

import type { ComposeOption } from 'echarts/core'
import type { BarSeriesOption } from 'echarts/charts'
import type {
  DatasetComponentOption,
  GridComponentOption,
  TooltipComponentOption,
} from 'echarts/components'

declare global {
  export type ECOption = ComposeOption<
    | BarSeriesOption
    | DatasetComponentOption
    | GridComponentOption
    | TooltipComponentOption
  >
}

export {}

You can use the type ECOption directly in your code without importing it:

app/components/example.vue

<script setup lang="ts">
const option = ref<ECOption>({
  dataset: {
    dimensions: ['Product', '2015', '2016', '2017'],
    source: [
      {
        Product: 'Matcha Latte',
        2015: 54,
        2016: 42,
        2017: 23,
      },
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }],
})
</script>

<template>
  <VChart :option="option" />
</template>

Configuration

Nuxt ECharts can be configured to provide better DX.

Server-Side Rendering