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。
30 秒上手
1. 安装
bash
npm install @wil-works/evoke-charts
# 或
pnpm add @wil-works/evoke-charts2. 引入
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>