# charm

**Repository Path**: seenyea/charm

## Basic Information

- **Project Name**: charm
- **Description**: 在线报表编辑器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-04
- **Last Updated**: 2022-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 组件定义
### 1. 任何一个组件都多个状态，并且总会出于某一状态。
### 2. 任何一个组件从一个状态转移到另一个状态，中间可以定义多个子状态。
### 3.组件的状态可以是无序的，也可以是有序的。但从一个状态转移到另个状态的子状态是有序的，但返回结果可以是无序的也可以是有序的。
### 4. 每个组件都有自己的公开状态和隐私状态。
### 5. 每个组件都可以在某种状态下唤起自己本身的下个状态或者其他组件（N>=1）的某个状态。
### 6. 具有输入的组件功能的组件，一定要有一下几种状态
#### a. 进入输入（in）
#### b. 输入中（typing）
#### c. 暂停输入（pause）

### 7. 任何一个显示组件，一定要有一下几种状态
#### a. 显示（show），
#### b. 获得焦点（on）
#### c.变化中（tansform）
#### e. 失去焦点（leave）
#### f. 只读（readonly）
#### g. 不可用（disabled）

### 8.所有组件的实例对象要有一个唯一的对应的uuid ，并且把实例引用存在一个公共管理仓库中。
### 9. 所有组件的公共state，在公共仓库中都需要有一个组件的uuid和对应的state做对应。

# 数据集定义
### 1. 每个数据集合都是独立的个体，可以完成某个特定的功能
### 2. 每个数据集合都通过事件进行通信
### 3. 每个数据集合都通过实例化的组件uuid对组件中状态进行变化，功能逻辑不在考虑范围之内
### 4. 数据集合一定要有如下的方法：
#### a. 历史数据的撤销（revoke）
#### b. 历史数据的恢复（regain）

# 逻辑功能定义
### 1. 每个功能的逻辑都是通过方法来完成的，并且方法一定会有数据输出

# 数据模型
### 1. 数据模型一定是一个业务主体数据结构，对于设定的数据一定要有默认值，建议默认值独立一个单元，
```
  //不建议这样
  const Model = {
    todo: {
      lists: []
    }
  }
  
  //建议这样
  const todo = {
      lists: []
  };
  
  const Model = {
    todo
  }
  
  export {
    todo,
    Model
  }
```

```
      //3/4圆环解决方案
     var xData = ['粥', '小笼包', '生煎', '汤包', '炸酱面']
     var yData = ['70', '75', '76', '90', '95']
     var colorList = ['#97e7ff', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf']
     var visualMapPiecesData = []
     // visualMap: {
     //   pieces: [
     //     { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }
     //   ]
     // }
     for (var i = 0; i < xData.length; i++) {
         visualMapPiecesData.push({
             value: yData[i],
             label: xData[i],
             color: colorList[i]
         })
     }
     option = {
         title: {
             text: '早餐统计',
             left: 'center',
             z: 101
         },
         grid:{
             show: true,
             borderWidth:0,
             backgroundColor: "#eeeeee",
             top: 0,
             left: "50%",
             bottom: "50%",
             z: 100
         },
         angleAxis: {
             max: 129.1,
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: false
             },
             splitLine: {
                 show: false
             },
             clockwise: false
         },
         radiusAxis: {
             type: 'category',
             data: xData,
             z: 100,
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: false
             },
             splitLine: {
                 show: false
             }
         },
         polar: {},
         tooltip: {
             trigger: 'item',
             formatter: function(params, ticket, callback) {
                 return params.name + ' : ' + ' (' + params.data + '%)'
             }
         },
         visualMap: {
             top: 40,
             x: 'center',
             orient: 'horizontal',
             textStyle: {
                 color: '#000'
             },
             pieces: visualMapPiecesData,
             outOfRange: {
                 color: '#999'
             },
             z: 101
         },
         series: [{
             type: 'bar',
             data: yData,
             coordinateSystem: 'polar',
             barWidth: 20,
             showBackground: true,
             backgroundColor:"rgba(0, 0, 0, 0.1)",
             roundCap: true,
             itemStyle: {
                 normal: {
                     // 定制显示（按顺序）
                     color: function(params) {
                         return colorList[params.dataIndex]
                     }
                 }
             }
         }]
     }

```