v0.2.0 · 零依赖 Canvas 图表库

Evoke Charts

Vue 3 图表库:折线、柱状、饼环、散点、热力、K 线等 20+ 图表类型,ECharts 风格的 options 配置式声明,绘制层全部自研 Canvas 2D,不依赖任何第三方图表引擎,也不依赖 Evoke 其他组件库。

20+图表类型
0第三方运行时依赖(仅 Vue 3 peer)
PNG + SVG位图与真矢量双导出
--ev-*令牌取色,换主题即跟随

配置式声明

一个 options 对象描述类型、数据与样式,直角坐标系家族共用 labels + series 数据模型,换类型不改数据结构。

主题与暗色跟随

从宿主的 --ev-* 令牌实时取色,换主题、切暗色图表即跟随;无令牌环境回落内置色板。

交互内建

tooltip、图例点选、十字准线、dataZoom 缩放、框选刷选、多图联动、导出与还原工具箱,无需额外插件。

零依赖自绘

全部绘制自研 Canvas 2D,仅 peer 依赖 Vue 3;模块顶层不访问 DOM,SSR 环境安全。

导出

toDataURL 输出 PNG 位图,exportSVG 基于渲染指令录制重放,输出可编辑的真矢量文件。

无障碍

画布带 role="img" 与 aria-label,悬浮信息经 aria-live 播报,键盘与读屏场景可用。

ecosystem

搭整套中后台界面?

同族的 Evoke Business UI 依赖本包并以 <eb-chart> 提供同一图表引擎,主题与暗色自动跟随组件库;做官网与营销页可以看看姊妹库 Evoke UI。

查看 business 内嵌使用的方式

交互与联动

图例点选、悬停高亮、十字准线、滑块与滚轮缩放、框选刷选、多图 connect 联动——每一项都有可运行的在线演示。

立即体验

30 秒上手

1. 安装

bash
npm install @wil-works/evoke-charts
# 或
pnpm add @wil-works/evoke-charts

2. 引入

js
import { createApp } from 'vue'
import EvokeCharts from '@wil-works/evoke-charts'
import '@wil-works/evoke-charts/styles'
import App from './App.vue'

const app = createApp(App)
app.use(EvokeCharts) // 全局注册 <EvChart />
app.mount('#app')

3. 在页面中使用

vue
<template>
  <EvChart :options="options" :height="320" />
</template>

<script setup>
const options = {
  type: 'line',
  labels: ['一月', '二月', '三月', '四月'],
  series: [{ name: '营收', data: [120, 200, 150, 80] }],
}
</script>

更多引入方式见安装与引入,按数据形态挑图见总览与选型