# lit-charts

**Repository Path**: chanterchen/lit-charts

## Basic Information

- **Project Name**: lit-charts
- **Description**: 基于Lit封装的Echarts组件库，包含StoryBook用例，可打包成lit-echarts.es.js和lit-echarts.umd.js。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-22
- **Last Updated**: 2025-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Lit, Echarts, TypeScript

## README



# lit-charts

## 介绍
lit-charts 是一个基于 Lit 封装的 ECharts 组件库。它提供了丰富的图表组件，方便在 Lit 项目中快速集成和使用 ECharts 图表。项目包含 StoryBook 示例，便于开发者参考使用。

## 软件架构
该项目通过 Lit 的 Web Component 特性封装 ECharts 图表库，支持模块化开发和组件复用。项目构建后可生成两种格式的包：
- `lit-echarts.es.js`: 适用于 ES Modules 的打包格式。
- `lit-echarts.umd.js`: 适用于多种模块系统的通用打包格式（UMD）。

此外，项目中使用 StoryBook 来展示和测试封装后的组件。

## 安装教程
1. 克隆仓库到本地：
   ```bash
   git clone https://gitee.com/chanterchen/lit-charts.git
   ```
2. 进入项目目录：
   ```bash
   cd lit-charts
   ```
3. 安装依赖：
   ```bash
   npm install
   ```
4. 构建项目：
   ```bash
   npm run build
   ```
5. 在你的 Lit 项目中引入构建生成的文件即可使用。

## 使用说明
1. 引入组件：
   在你的 Lit 项目中通过以下方式引入：
   ```javascript
   import 'lit-echarts';
   ```
2. 在模板中使用：
   ```typescript
    render: (args: LitChinaMapProps): TemplateResult => {
        return html`<lit-china-map 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .center=${args.center}
            .zoom=${args.zoom}
            .emphasisColor=${args.emphasisColor}
            .areaColor=${args.areaColor}
            .borderColor=${args.borderColor}
            .data=${args.data}
        />`;
    }
   ```
3. 通过 `config` 属性传入 ECharts 配置对象，即可渲染图表。

## 参与贡献
1. Fork 本仓库。
2. 创建新的功能分支（如 `feat/your-feature`）。
3. 提交代码并描述清楚修改内容。
4. 创建 Pull Request，等待审核与合并。

## 特技
1. 使用 `Readme_XXX.md` 文件支持多语言文档，例如 `Readme_en.md`（英文）和 `Readme_zh.md`（中文）。
2. 项目托管于 Gitee，可参考 [Gitee 官方博客](https://blog.gitee.com) 获取更多内容。
3. 探索 Gitee 上的优秀开源项目：[https://gitee.com/explore](https://gitee.com/explore)
4. 了解 Gitee 最有价值开源项目（GVP）：[https://gitee.com/gvp](https://gitee.com/gvp)
5. 获取 Gitee 官方使用手册：[https://gitee.com/help](https://gitee.com/help)
6. 欣赏 Gitee 封面人物，了解 Gitee 会员风采：[https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)