iov-chart

iov-chart

基于 ECharts 6 的 Vue 2 图表组件库，统一了图表配色、坐标轴刻度、tooltip 排版与空状态处理。

特性

• 开箱即用：配色、网格、坐标轴刻度、tooltip、图例等默认样式已内置，只需传数据
• 配置透传：每个组件都提供 config，会与内置配置深合并，可覆盖任意 ECharts 配置
• 按需加载：ECharts 按需注册，未使用的图表类型不会打进产物；词云按需异步加载 echarts-wordcloud
• 零业务耦合：不含任何接口请求、路由、store 依赖

安装

npm i iov-chart echarts iov-design

echarts（^6.1.0）、iov-design（^2.15.138）、vue 为 peerDependencies，需由宿主项目安装。 空状态（el-empty）、提示气泡（el-tooltip）、热力表格（el-table / el-popover）均来自 iov-design，宿主需全局注册并引入其主题样式。

使用

全量注册

import Vue from 'vue'
import IovChart from 'iov-chart'
import 'iov-chart/dist/iov-chart.css'

Vue.use(IovChart)

按需引入

import { IovBarChart, createSeriesListTooltip } from 'iov-chart'
import 'iov-chart/dist/iov-chart.css'

<template>
  <iov-bar-chart :chart-data="chartData" :config="config" />
</template>

<script>
import { createSeriesListTooltip } from 'iov-chart'

export default {
  data() {
    return {
      chartData: {
        xAxis: ['周一', '周二', '周三'],
        yAxis: [{ name: '订单量', data: [120, 200, 150] }]
      },
      config: {
        tooltip: { formatter: createSeriesListTooltip(['decimal']) }
      }
    }
  }
}
</script>

组件

目录结构

src/
├── components/     组件（kebab-case，统一 -chart 后缀）
├── echarts/        ECharts 按需注册与配置预设（坐标轴、网格、tooltip、图例）
├── formatters/     tooltip / 图例格式化函数
├── mixins/         chart-core：实例创建、resize、事件派发
├── styles/         scss 变量、混入、图表容器与 tooltip 样式
├── theme/          颜色、字体、尺寸等设计 token
└── utils/          纯工具（格式化、颜色、刻度计算、文本度量、滚动）

开发

npm run docs:dev     # 本地启动文档站点（vuepress）
npm run docs:build   # 构建文档
npm run build        # 构建 npm 包产物到 dist
npm run lint         # 代码检查
npm run color        # 由主色生成 10 级色阶，写入 src/styles/color.scss

说明

• 组件内样式统一使用 iov- 前缀 + BEM 命名，避免与宿主项目冲突。
• 提交前由 husky 钩子处理：pre-commit 对暂存的 src 文件跑 eslint，commit-msg 校验提交信息需符合 <type>(<scope>): <subject>；若钩子未生效，执行 npx husky install。
• 代码规范见 .eslintrc.js（忽略规则见 .eslintignore）；安装工作区推荐的 ESLint 插件后保存即自动修复，相关配置在 .vscode/settings.json 与 .editorconfig。