# chart-template

**Repository Path**: endeep/chart-template

## Basic Information

- **Project Name**: chart-template
- **Description**: 图表配置模板
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-04-17
- **Last Updated**: 2023-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# chart-template

基于 vue + ECharts 搭建常用图表的配置模版,
主要思路：沿用 ECharts 的 options 统一配置，项目中分为三段：全局配置、同类型模版配置、单类型个性配置

项目结构说明：

- src/echart:模版库
- src/test:模版库对应的测试库 名称命名采用 模版名称\_数字 的方式,实现一个模版对应对个测试示例
- src/data: echarts 对应的数据库，包括 map 中的 geojson 数据

实现途径：

1. src/echart/echart.vue 实现全局配置、窗口动态监听、预留 options 处理的抽象方法
2. src/echart/_/_.vue 实现类型模版配置, 利用 vue.extend 方法继承 echart.vue 组件, 并实现模版配置，可覆盖全局配置
3. src/test/_/_.vue 实现个性配置, 可覆盖全局配置、模版配置

## 开发

1. 第一步：新建：在 src/echart 文件夹下新建模版， 在 src/test 文件夹下新建测试示例，文件对应
2. 第二步，导入：在 src/echart/index.js 引入模版文件, 在 src/test/index.js 文件夹下引入测试文件。命名对应：如 模版 bar1 对应 测试 bar1_1、bar1_2、bar1_3 等

## 使用

1. 复制 src/echart/echart.vue 文件
2. 复制 src/echart*/*.vue 文件, 修改 echart.vue 的引用地址
3. 复制 src/test/_/_.vue 文件, 修改 模版引用地址，配置 options