Datumwealth-vue-components NPM

datumwealth-vue-components

说明

该项目为西筹金融科技前端组件库项目。使用Vue3+TS+Vite开发。

安装与使用

安装datumwealth-vue-components

pnpm导入
$ pnpm add -D datumwealth-vue-components
yarn导入
$ yarn add -D datumwealth-vue-components
npm导入
$ npm install -D datumwealth-vue-components

声明使用

两种引入方式如下（以DwWechatLogin组件举例）：

单个组件引入

首先main.ts引入全局样式：

// 导入组件依赖
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
    GridComponent,
    TooltipComponent,
    MarkLineComponent,
    MarkPointComponent,
    VisualMapComponent,
} from 'echarts/components'
// 导入样式
import 'datumwealth-vue-components/dist/style.css'
use([
    CanvasRenderer,
    LineChart,
    GridComponent,
    TooltipComponent,
    MarkLineComponent,
    MarkPointComponent,
    VisualMapComponent,
])

页面中引入组件并使用
```js
<template>
    <DwWechatLogin
        appid="你的appid"
        scope="snsapi_login"
        :state="wechatState"
        :redirect_uri="redirect_uri"
    />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { DwWechatLogin } from 'datumwealth-vue-components'

const stateUUID = Math.round(Math.random() * 100 + 100)
// state
const wechatState = ref(stateUUID.toString())

// redirect_uri
const redirect_uri = computed(() => {
    const uri = `${window.location.origin}/login`
    const redirect_uri = encodeURI(uri)
    return redirect_uri
})
</script>

全局引入

main.ts中引入

// 导入组件依赖
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
    GridComponent,
    TooltipComponent,
    MarkLineComponent,
    MarkPointComponent,
    VisualMapComponent,
} from 'echarts/components'
// 导入组件
import DwVueComponents from 'datumwealth-vue-components'
// 导入样式
import 'datumwealth-vue-components/dist/style.css'
use([
    CanvasRenderer,
    LineChart,
    GridComponent,
    TooltipComponent,
    MarkLineComponent,
    MarkPointComponent,
    VisualMapComponent,
])

const app = createApp(App)

// 导入西筹组件 app.use(DwVueComponents)

*.vue文件中使用

<template>
    <DwWechatLogin
        appid="你的appid"
        scope="snsapi_login"
        :state="wechatState"
        :redirect_uri="redirect_uri"
    />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'

const stateUUID = Math.round(Math.random() * 100 + 100) // state const wechatState = ref(stateUUID.toString())

// redirect_uri const redirect_uri = computed(() => { const uri = ${window.location.origin}/login const redirect_uri = encodeURI(uri) return redirect_uri })

## 版本

### 0.3.12

* 组件开放动画参数。

### 0.3.11

* `DwDefectDashboard`组件开发角速度设置。

### 0.3.10

* `DwDefectDashboard`数据为`0`的处理。

### 0.3.9

* 组件包的大小优化

### 0.3.8

1. feat:

* `DwDefectFactorPositionTraceLine`组件开放坐标轴单位设置功能。

### 0.3.7

1. fix:

* `DwStocksAnalysisLine`组件自适应大小报错修复

### 0.3.6

1. feat:

* `DwStocksAnalysisLine`组件支持主题

### 0.3.5

1. feat
* `DwLineChart`、`DwDefectPositionLine`、`DwDefectFactorLine`、`DwDefectFactorPositionTraceLine`开放自动设置`y`轴数据范围参数
* `DwLineChart`处理多条显示的`y`轴数据范围设置
* 添加`Defect`系列组件类型导出

### 0.3.4

1. feat

* `DwDefectPositionLine`、`DwDefectFactorLine`、`DwDefectFactorPositionTraceLine`开放参数部分配置参数
* `DwDefectFactorLine``y`轴添加百分比符号
* `DwDefectFactorPositionTraceLine`提示框仓位添加百分号

### 0.3.3

1. feat

* `DwDefectPositionLine`、`DwDefectFactorLine`、`DwDefectFactorPositionTraceLine`组件开放`grid`参数

2. fix

* `DwDefectDashboard`组件显示数值逻辑调整
* 更新说明文档

### 0.3.2

1. feat

* 更新三方库

"echarts": "^5.3.2", "vue-echarts": "^6.0.3"

2. fix

* 修复组件不能使用app.use()单独导入的问题
* `zRander`的`registerPainter`未初始化，报错`Error: Renderer 'undefined' is not imported. Please import it first`

### 0.3.1

1. `DwDefectFactorPositionTraceLine`组件:

**factorVisualMapPieces**：开放设置`权益性价比`线条的`VisualMap`的`Pieces`。
**positionVisualMapPieces**：开放设置`公募持仓`线条的`VisualMap`的`Pieces`。
**positionMarkLineYData**：开放设置`持仓`的`MarkLine`位置。

2. 去掉`0.3.0`新增组件的调试输出。
3. 测试项目更新：
   
* 接口请求添加`matias-axios-throttle`三方库，进行组件请求去重。
* 状态管理更新为使用`pinia`并使用`matias-pinia-persisted-state`实现状态本地持久化。
* 删除废弃文件

4. 更新说明文件
5. 修复bug
* 样式不能全局导入问题
* 不能全局引入组件问题

### 0.3.0

1. 添加基础组件

* `DwEcharts`组件
* `DwLineChart`组件

2. 添加“寻暇记”相关组件

*  `DwDefectDashboard`组件
*  `DwDefectPositionLine`组件
*  `DwDefectFactorLine`组件
*  `DwDefectFactorPositionTraceLine`组件

3. 更新打包输出调整
```json
{
    "main": "./components/index.ts",
    "files": [
        "types",
        "components",
        "dist",
        "global.d.ts",
        "shims-vue.d.ts"
    ],
    "module": "./components/index.ts",
    "types": "./types/components/index.d.ts",
    "exports": {
        ".": {
            "import": "./components/index.ts",
            "require": "./dist/dw-vue-components.umd.js"
        }
    },
}

{
   "main": "./dist/index.umd.js",
   "files": [
     "types",
     "dist"
   ],
   "module": "./dist/index.es.js",
   "types": "./types/components/index.d.ts",
   "exports": {
      ".": {
         "import": "./dist/index.es.js",
         "require": "./dist/index.umd.js"
      }
   },
}