or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdinjection-system.mdmain-component.md
tile.json

tessl/npm-vue-echarts

Vue.js component for Apache ECharts™ providing declarative data visualization with Vue 2.7+ and Vue 3.1+ support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-echarts@7.0.x

To install, run

npx @tessl/cli install tessl/npm-vue-echarts@7.0.0

index.mddocs/

Vue-ECharts

Vue-ECharts is a Vue.js component for Apache ECharts™, providing declarative data visualization with seamless integration for both Vue 2.7+ and Vue 3.1+. It offers reactive chart updates, comprehensive TypeScript support, automatic resizing, theme system, and CSP (Content Security Policy) compliance.

Package Information

  • Package Name: vue-echarts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install echarts vue-echarts
  • Vue Compatibility: Vue 2.7+ and Vue 3.1+
  • Peer Dependencies: echarts ^5.5.1, vue ^2.7.0 || ^3.1.1

Core Imports

import VChart from "vue-echarts";
import VChart, { THEME_KEY } from "vue-echarts";

For CSP-compliant builds (when style-src or style-src-elem CSP directives prevent inline styles):

import VChart from "vue-echarts/csp";
import "vue-echarts/csp/style.css";

CSP Note: The CSP build prevents inline <style> injection by extracting all styles to a separate CSS file. Use this when your application has strict Content Security Policy requirements.

CommonJS:

const VChart = require("vue-echarts");

UMD (Browser):

<script src="https://unpkg.com/vue-echarts/dist/index.min.js"></script>
<!-- Global: VueECharts -->

Basic Usage

Vue 3 with Composition API

<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent]);

provide(THEME_KEY, "dark");

const option = ref({
  title: { text: "My Chart" },
  series: [{
    type: "pie",
    data: [
      { value: 335, name: "Direct" },
      { value: 310, name: "Email" }
    ]
  }]
});
</script>

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

Vue 2 Options API

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import VChart from "vue-echarts";

use([CanvasRenderer, LineChart]);

export default {
  components: { VChart },
  data() {
    return {
      option: {
        xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
        yAxis: { type: "value" },
        series: [{ data: [120, 200, 150], type: "line" }]
      }
    };
  }
};
</script>

Architecture

Vue-ECharts is built around several key components:

  • Main Component: Vue component that wraps ECharts instances with reactive props
  • Composables System: Reusable composition functions for common patterns (API access, auto-resize, loading states)
  • Injection System: Vue's provide/inject for theme and configuration inheritance
  • Dual Build System: Standard and CSP-compliant builds for different security requirements
    • Standard Build: Default version with inline style injection
    • CSP Build: Content Security Policy compliant version with external CSS
  • Vue Compatibility Layer: Support for both Vue 2.7+ and Vue 3.1+ via vue-demi

Capabilities

Main Component

The core Vue component that renders ECharts with reactive props and comprehensive event handling. Supports all ECharts configurations with Vue's reactivity system.

declare const VChart: DefineComponent<
  ChartProps & ChartEventProps,
  {
    root: Ref<HTMLElement | undefined>;
    chart: Ref<EChartsType | undefined>;
  },
  {},
  {},
  ChartMethods
>;

interface ChartProps {
  /** ECharts option configuration object */
  option?: Option;
  /** Chart theme (object or string name) */
  theme?: Theme;
  /** ECharts initialization options */
  initOptions?: InitOptions;
  /** Chart update options */
  updateOptions?: UpdateOptions;
  /** Auto-resize configuration */
  autoresize?: AutoResize;
  /** Loading state */
  loading?: boolean;
  /** Loading animation options */
  loadingOptions?: LoadingOptions;
  /** Chart group name for linking charts */
  group?: string;
  /** Manual update mode */
  manualUpdate?: boolean;
}

Main Component

Injection System

Vue injection keys for providing themes and configuration options to child components.

declare const THEME_KEY: InjectionKey<ThemeInjection>;
declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection>;

Injection System

Core Types

// Imported from ECharts core
import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts/core";
import type { Ref, DefineComponent, InjectionKey } from "vue-demi";

/** ECharts instance type */
type EChartsType = ReturnType<typeof init>;

/** Chart option configuration */
type Option = Parameters<EChartsType["setOption"]>[0];

/** Chart theme */
type Theme = NonNullable<Parameters<typeof init>[1]>;

/** Auto-resize configuration */
type AutoResize = boolean | {
  throttle?: number;
  onResize?: () => void;
};

/** Loading animation options */
interface LoadingOptions {
  text?: string;
  textColor?: string;
  fontSize?: number | string;
  fontWeight?: number | string;
  fontStyle?: string;
  fontFamily?: string;
  maskColor?: string;
  showSpinner?: boolean;
  color?: string;
  spinnerRadius?: number;
  lineWidth?: number;
  zlevel?: number;
}

/** Chart initialization options */
type InitOptions = NonNullable<Parameters<typeof init>[2]>;

/** Chart update options */
type UpdateOptions = SetOptionOpts;

/** ECharts element event type */
type ECElementEvent = import("echarts/core").ECElementEvent;

/** ZRender element event type */
type ElementEvent = import("echarts/core").ElementEvent;

/** Generic injection type */
type Injection<T> = T | null | Ref<T | null> | { value: T | null };

/** Theme injection type */
type ThemeInjection = Injection<Theme>;

/** Init options injection type */
type InitOptionsInjection = Injection<InitOptions>;

/** Update options injection type */
type UpdateOptionsInjection = Injection<UpdateOptions>;

/** Loading options injection type */
type LoadingOptionsInjection = Injection<LoadingOptions>;