datumwealth-vue-components

说明

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

安装与使用

1. 安装datumwealth-vue-components

• pnpm导入

$ pnpm add -D datumwealth-vue-components

• yarn导入

$ yarn add -D datumwealth-vue-components

• npm导入

$ npm install -D datumwealth-vue-components

2. 声明使用

两种引入方式如下（以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,
])

页面中引入组件并使用

<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`文件中使用
```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
})
</script>

版本

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. 更新打包输出调整

{
    "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"
      }
   },
}

0.2.13

• DwPortfolioNetWorth组件导出chart参数

0.2.12

• DwPortfolioNetWorth组件tooltip显示位置调整及添加移动端隐藏逻辑。

0.2.11

• DwPortfolioNetWorth组件显示范围问题处理。

0.2.10

• DwPortfolioNetWorth组件支持传递两个值。

0.2.9

• DwPortfolioNetWorth组件样式调整。

0.2.8

• DwPortfolioNetWorth组件初始化显示问题优化。

0.2.7

• DwPortfolioNetWorth组件：

1. 显示范围调整
2. 支持空显示

0.2.6

• 添加DwPortfolioNetWorth单位净值折线组件。

0.2.2

• DwStocksAnalysisLine组件，日频近一天去掉特殊处理

0.2.1

• DwStocksAnalysisLine组件，日频时间切换选项去掉近一天添加近半年

0.2.0

1. 添加基金筛选小程序相关组件

• 滑块组件：DwFilterSlider
• 刻度尺组件：DwFilterRuler
• 选择范围阴影图组件：DwFilterArea
• 阴影图、滑块组合组件：DwFilterAreaSlider
• 刻度尺、滑块组合组件：DwFilterRulerSlider

0.1.20

• DwStocksAnalysisLine组件，开放取消数据更新动画参数

0.1.19

• DwStocksAnalysisLine组件自适应问题修改

0.1.18

• DwStocksAnalysisLine组件优化：

1. 添加自适应功能
2. 开放大屏查看按钮插槽
3. UI微调

0.1.17

• 添加DwStocksAnalysisLine组件，西筹“个股分析”小程序，折线图

0.1.16

• 添加DwPortfolioIndustry组件，西筹“基金组合”结果页，行业沉积图
• 添加DwPortfolioPie组件，西筹“基金组合”结果页，行业饼图

0.1.15

• 添加DwPortfolioLine组件，西筹“基金组合”结果页优化折线图

0.1.14

• 添加DwPortfolioIcon组件，西筹“基金组合”组合策略折线icon

0.1.13

• 添加DwPortfolioBg组件，“基金组合”H5背景组件。

0.1.8

• 添加滑块拖拽验证DwDragVerify.

0.1.0

• 添加微信登录二维码组件DwWechatLogin.