# echarts-showcase

**Repository Path**: Allen_2017/echarts-showcase

## Basic Information

- **Project Name**: echarts-showcase
- **Description**: 本项目是Echarts图表库，用于按照公司设计规范制作符合公司要求的图表，方便后期直接复用。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-02
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ECharts Showcase

`echarts-showcase` 是一个基于官方 `echarts-examples` 抽出的源码项目，目标不是复刻整个官网，而是保留“示例站”这条主线，作为后续沉淀公司图表样式资产的基础工程。

当前项目保留了这些核心能力：

- 示例首页：按图表类型浏览大量官方示例
- 示例预览：点击卡片后直接查看效果
- 示例编辑器：保留官方在线编辑器能力，便于调样式、改 mock 数据、导出截图
- 中英文入口：`/zh/index.html` 和 `/en/index.html`

## 项目定位

这不是编译产物仓库，而是可继续开发的源码工程。后续你们可以基于它逐步做这些事：

- 用公司设计规范统一改造官方示例样式
- 将真实业务图表沉淀为可复用模板
- 将示例数据逐步替换成 mock 数据
- 保留官方示例分类体系，同时增加公司内部分类

## 安装

```sh
npm i --force
```

## 启动

```sh
npm run dev
```

启动后会打开：

```text
http://127.0.0.1:3002/zh/index.html
```

说明：

- `npm run dev` 会先执行一次 `npm run compile:example`，确保示例源码先编译到可预览的 JS。
- 之后会启动前端 bundle watch 和本地静态服务器。

## 示例源码组织

推荐只编辑这里：

```text
public/examples/ts/
```

不要直接改这里：

```text
public/examples/js/
```

因为 `js` 目录是由下面命令生成的：

```sh
npm run compile:example
```

单独编译某个示例：

```sh
npm run compile:example -- line-simple.ts
```

## 如何新增一个示例

在 `public/examples/ts/` 下新增 `*.ts` 或 `*.js` 文件，并在文件开头写 metadata：

```js
/*
title: Area Pieces
titleCN: 折线图区域高亮
category: 'line, visualMap'
since: 6.0.0
*/
```

常用 metadata：

- `title`
- `titleCN`
- `category`
- `since`
- `theme`
- `noExplore`

## 与本地 echarts 仓库联调

如果你要让示例页直接加载本地 `echarts` 仓库构建结果，而不是 npm/CDN 版本，可以使用 `local=1`。

示例：

```text
http://127.0.0.1:3002/zh/editor.html?c=line-simple&local=1
```

当前项目默认约定本地 ECharts 资源地址在：

```text
http://localhost:8080/dist/echarts.js
```

这和官方 `echarts-examples` 的联调方式一致。通常你可以在 sibling 的 `echarts` 仓库里启动对应的本地服务后使用。

如果你需要覆盖这个地址，可以新建：

```text
config/config.local.js
```

内容示例：

```js
exports.SCRIPT_URLS = {
  localEChartsDir: 'http://localhost:8080',
  localEChartsGLDir: 'http://localhost:8081'
};
```

## 后续建议

如果你准备把它长期演进为公司图表样式库，建议下一步按这个顺序做：

1. 固化公司色板、字体、阴影、间距 token
2. 建立“基础图表模板”而不是直接复制单个业务图
3. 给每个示例补充 mock 数据和适用场景说明
4. 对常用图表建立“标准版 / 大屏版 / 深色版”三个变体

## 与官方差异

当前项目基于官方示例源码构建，但只保留示例站本身：

- 首页补了一层官网风格导航壳
- 其他官网栏目不在本仓库中维护
- 非示例页链接默认跳回官方站对应页面

这能保证你后续专注在“图表资产库”本身，而不是维护整站官网。