# FinancialCustomerView

**Repository Path**: hihopeorg/FinancialCustomerView

## Basic Information

- **Project Name**: FinancialCustomerView
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-12
- **Last Updated**: 2026-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FinancialCustomerView

**本项目是基于开源项目FinancialCustomerView进行ohos化的移植和开发的，可以通过项目标签以及github地址（ https://github.com/Tophold/FinancialCustomerView ）追踪到原项目版本**

#### 项目介绍

- 项目名称：金融类自定义View

- 所属系列：ohos的第三方组件适配移植

- 功能：

  1. 仿蚂蚁金服基金走势图
  2. k线走势图
  3. 饼图
  4. 双Thumb自定义进度条
  5. RX功能

- 项目移植状态：完成

- 调用差异：无

- 项目作者和维护人：hihope

- 联系方式：hihope@hoperun.com

- 原项目Doc地址：https://github.com/Tophold/FinancialCustomerView

- 原项目基线版本：v1.5,sha1:9f0c69f5bb1e933e8878fe5ffb8e792b6b86b97c

- 编程语言：Java

#### 效果展示
![avatar](preview.gif)

#### 安装教程

##### 方案一：

1. 添加har包到lib文件夹内。

2. 在entry的build.gradle内添加如下代码。

   ```
   implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
   ```

##### 方案二：

  1. 在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址:

```
 repositories {
     maven {
         url 'http://106.15.92.248:8081/repository/Releases/' 
     }
 }
```

  2. 在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
 dependencies {
     implementation 'com.tophold.ohos:financiallib:1.0.0'
 }
```

#### 使用说明

1. ##### 仿蚂蚁金服基金走势图

   ###### 添加布局

   ```
   <com.tophold.trade.view.fund.FundView
       ohos:id="$+id:af_fv_fundview"
       ohos:height="300vp"
       ohos:width="match_parent"
       ohos:background_element="#fff"/>
   ```

   ###### 初始化FundView

   ```
   Color fundViewColor = null;
   try {
       fundViewColor = new Color(getResourceManager().getElement(ResourceTable.Color_color_colorAccent).getColor());
       } catch (Exception e) {
       e.printStackTrace();
   }
   mFundView.getBrokenPaint().setColor(fundViewColor);
   mFundView.getInnerXPaint().setStrokeWidth(1);
   mFundView.getBrokenPaint().setStrokeWidth(1);
   mFundView
           .setBasePaddingTop(140)
           .setBasePaddingLeft(50)
           .setBasePaddingRight(40)
           .setBasePaddingBottom(30)
           .setLoadingText("正在加载，马上就来...");
   ```

   ###### 加载并适配图表数据

   ```
   private void loadData() {
       Disposable subscribe = Observable.timer(StringUtils.getRadomNum(500, 3000), TimeUnit.MILLISECONDS)
               .map(map -> {
                   String originalFundData = FundSimulateNetAPI.getOriginalFundData(mContext);
                   if (originalFundData == null) {
                       LogUtils.e(TAG, "loadData: 从网络获取到的数据为空");
                       return null;
                   }
                   OriginFundMode[] originFunModes;
                   try {
                       originFunModes = GsonUtil.fromJson2Object(originalFundData, OriginFundMode[].class);
                   } catch (Exception e) {
                       e.printStackTrace();
                       return null;
                   }
                   List<OriginFundMode> OriginFundModeList = Arrays.asList(originFunModes);
                   return adapterData(OriginFundModeList);
               })
               .subscribeOn(Schedulers.computation())
               .observeOn(OhosSchedulers.mainThread())
               .subscribe(
                       mData -> {
                           if (StringUtils.isEmpty(mData)) {
                               LogUtils.d(TAG, "loadData: data is empty!");
                               return;
                           }
                           mFundView.setDataList(mData);
                       }
                       , throwable -> throwable.printStackTrace());
   
       unSubscription(subscribe);
   }
   
   private List<FundMode> adapterData(List<OriginFundMode> originFundModeList) {
       List<FundMode> fundModeList = new ArrayList<>();
       for (OriginFundMode originFundMode : originFundModeList) {
           FundMode fundMode = new FundMode(originFundMode.timestamp * 1000, originFundMode.actual);
           fundModeList.add(fundMode);
       }
       return fundModeList;
   }
   ```

2. ##### k线走势图

   ###### 添加布局

   ```
   <com.tophold.trade.view.kview.KView
       ohos:id="$+id:akv_kv_kview"
       ohos:height="300vp"
       ohos:width="match_parent"/>
   ```

   ###### 加载并适配MasterView(主图，包含分时图和蜡烛图)图表数据

   ```
   private void loadData() {
       //模拟网络环境加载数据列表
       Disposable disposable = Observable.timer(StringUtils.getRadomNum(500, 2000),
               TimeUnit.MILLISECONDS)
               .doOnNext(data -> {
                   String originalData = KViewSimulateNetAPI.getOriginalFundData(mContext, 2);
                   if (originalData == null) {
                       LogUtils.e(TAG, "loadData: 从网络获取到的数据为空");
                       return;
                   }
                   try {
                       List<OriginQuotes> originQuotes = GsonUtil
                               .fromJson2Object(originalData, new TypeToken<List<OriginQuotes>>() {
                               }.getType());
                       mQuotesList = adapterData(originQuotes);
                   } catch (Exception e) {
                       e.printStackTrace();
                       LogUtils.e(TAG, "loadData: json转换错误");
                       return;
                   }
               })
               .subscribeOn(Schedulers.computation())
               .observeOn(OhosSchedulers.mainThread())
               .subscribe(
                       data -> mAkvKvKview.setKViewData(mQuotesList, new KViewListener.MasterTouchListener() {
                           @Override
                           public void onLongTouch(Quotes preQuotes, Quotes currentQuotes) {
                               showContanier(preQuotes, currentQuotes);
                           }
   
                           @Override
                           public void onUnLongTouch() {
                               mAkvLlContainer.setVisibility(Component.INVISIBLE);
                           }
   
                           @Override
                           public void needLoadMore() {
                               loadMore();
                           }
                       }),
                       Throwable::printStackTrace
               );
       unSubscription(disposable);
   }
   ```

   ###### 加载并适配MinorView(副图，包含各种副图指标)图表数据

   ```
   private void loadMore() {
       if (mLoadMoreData == null) return;
       Disposable disposable = Observable.timer(StringUtils.getRadomNum(1000, 5000), TimeUnit.MILLISECONDS)
               .subscribeOn(Schedulers.io())
               .observeOn(OhosSchedulers.mainThread())
               .subscribe(
                       data -> {
                           int size = mLoadMoreData.size();
                           int min = size / 20;
                           int max = size / 5;
                           int loadSize = StringUtils.getRadomNum(min, max);
                           if (index == loadSize) {
                               mAkvKvKview.loadMoreNoData();
                           }
                           if ((index + loadSize) > mLoadMoreData.size()) {
                               loadSize = mLoadMoreData.size();
                           }
                           List<Quotes> loadList = mLoadMoreData.subList(index, index + loadSize);
                           index = index + loadSize;
                           mAkvKvKview.loadKViewData(loadList);
                       }
                       , throwable -> throwable.printStackTrace());
       unSubscription(disposable);
   }
   ```

   ###### 切换蜡烛图与分时图

   ```
   public void showCandle() {
       boolean showTimSharing = mAkvKvKview.isShowTimSharing();
       mAkvKvKview.setShowTimSharing(!showTimSharing);
       if (!showTimSharing) {
           mAkvBtnShowCandle.setText("点击展示蜡烛图");
       } else {
           mAkvBtnShowCandle.setText("点击展示分时图");
       }
   }
   ```

   ###### 切换副图的显示状态

   ```
   public void showMinor() {
       boolean showMinor = mAkvKvKview.isShowMinor();
       mAkvKvKview.setShowMinor(!showMinor);
       if (!showMinor) {
           mAkvBtnShowMinnor.setText("点击不显示副图");
       } else {
           mAkvBtnShowMinnor.setText("点击显示副图");
       }
   }
   ```

   

3. ##### 饼图

   ###### 添加布局

   ```
   <com.tophold.trade.view.pie.PieChartView
       ohos:id="$+id:hatab_tapc_chart"
       ohos:height="215vp"
       ohos:width="match_parent"
       ohos:background_element="#fff"/> 
   ```

   ###### 初始化PieChartView

   ```
   private void initPieChart() {
       mPieChartView.setBasePaddingTop(40f);
       mPieChartView.setBasePaddingBottom(40f);
   }
   ```

   ###### 加载并适配饼图数据

   ```
   private void loadPieChart() {
       List<PieEntrys> pieEntryList = new ArrayList<>();
       pieEntryList.add(new PieEntrys(10f, "80%",
               getColorId(ResourceTable.Color_trade_analyze_pie_1), false, "澳元/美元"));
       pieEntryList.add(new PieEntrys(50f, "胜率 86.96%",
               getColorId(ResourceTable.Color_trade_analyze_pie_2), true, "英镑/美元"));
       pieEntryList.add(new PieEntrys(1f, "60.71%",
               getColorId(ResourceTable.Color_trade_analyze_pie_3), false, "黄金"));
       pieEntryList.add(new PieEntrys(1f, "76.47%",
               getColorId(ResourceTable.Color_trade_analyze_pie_4), false, "欧元/美元"));
   
       mPieChartView.setPieEntryList(pieEntryList);
   }
   ```

4. ##### 双Thumb自定义进度条

   ###### 添加布局

   ```
   <com.tophold.trade.view.seekbar.DoubleThumbSeekBar
       ohos:id="$+id:am_dtsv_seek3"
       ohos:height="54vp"
       ohos:width="match_parent"
       ohos:background_element="#fff"
       ohos:left_margin="4vp"
       ohos:right_margin="4vp"
       ohos:top_margin="20vp"/>
   ```

   ###### 初始化DoubleThumbSeekBar并适配数据

   ```
   am_dtsv_seek3.init(loadTpSeekBar(
           true, -44.0, 66.0, true, 4,
           true, true, 0.2, false,
           true, true, 0.33, false));
           
   private DoubleTumb loadTpSeekBar(boolean doubleThumb, double min, double max, boolean minFromLeft, int digit,
                                    boolean fromLeftA, boolean showTipsA, double progressA, boolean greenA,
                                    boolean fromLeftB, boolean showTipsB, double progressB, boolean greenB) {
   
       Color thumbAForeground;
       if (!greenA) {
           thumbAForeground = getCompatColor(ResourceTable.Color_dtsb_thumb1Color);
       } else {
           thumbAForeground = getCompatColor(ResourceTable.Color_dtsb_thumb2Color);
   
       }
   
       PixelMap thumbADrawable;
       if (!greenA) {
           thumbADrawable = getCompatDrawable("ico_tp.png");
       } else {
           thumbADrawable = getCompatDrawable("ico_sl.png");
       }
   
       DoubleTumb.Thumb thumbA = new DoubleTumb.Thumb(thumbAForeground);
       thumbA.progress = progressA;
       thumbA.mFromLeft = fromLeftA;
       thumbA.mShowTips = showTipsA;
       thumbA.setmThumb(thumbADrawable);
       thumbA.setmThumbWidth(AttrHelper.vp2px(20f, mContext));
       thumbA.setmThumbHight(AttrHelper.vp2px(25f, mContext));
   
       DoubleTumb.Thumb thumbB = null;
       if (doubleThumb) {
           Color thumbBForeground;
           if (!greenB) {
               thumbBForeground = getCompatColor(ResourceTable.Color_dtsb_thumb11Color);
           } else {
               thumbBForeground = getCompatColor(ResourceTable.Color_dtsb_thumb22Color);
   
           }
           PixelMap thumbBDrawable;
           if (!greenB) {
               thumbBDrawable = getCompatDrawable("ico_tp.png");
           } else {
               thumbBDrawable = getCompatDrawable("ico_sl.png");
           }
           thumbB = new DoubleTumb.Thumb(thumbBForeground);
           thumbB.progress = progressB;
           thumbB.mFromLeft = fromLeftB;
           thumbB.mShowTips = showTipsB;
           thumbB.setmThumb(thumbBDrawable);
           thumbB.setmThumbWidth(AttrHelper.vp2px(20f, mContext));
           thumbB.setmThumbHight(AttrHelper.vp2px(25f, mContext));
       }
   
       DoubleTumb doubleTumb = new DoubleTumb(min, max,
               AttrHelper.vp2px(4f, mContext),
               getCompatColor(ResourceTable.Color_dtsb_bgColor),
               thumbA,
               thumbB);
       doubleTumb.mMinLeft = minFromLeft;
       doubleTumb.mDigit = digit;
       doubleTumb.mLineTop = AttrHelper.vp2px(40f, mContext);
       doubleTumb.mLineBottom = AttrHelper.vp2px(10f, mContext);
       doubleTumb.mLineLeft = AttrHelper.vp2px(8f, mContext);
       doubleTumb.mLineRight = AttrHelper.vp2px(8f, mContext);
   
       return doubleTumb;
   }
   ```

5. ##### RX功能

   ```
   public void onRx() {
       Disposable disposable = Observable.create((ObservableOnSubscribe<String>) emitter -> {
           while (true) {
               emitter.onNext("a");
               Thread.sleep(500);
               emitter.onNext("b");
               Thread.sleep(2000);
               emitter.onNext("c");
               Thread.sleep(9000);
               emitter.onNext("d");
           }
       }).observeOn(Schedulers.io())
               .compose(RxUtils.rxApiSchedulerHelper())
               .sample(1000, TimeUnit.MILLISECONDS)
               .subscribe(s -> LogUtils.d(TAG, "accept: " + s));
       unSubscription(disposable);
   }
   ```

版本迭代

- v1.0.0

实现功能

- 仿蚂蚁金服基金走势图
- k线走势图
- 饼图
- 双Thumb自定义进度条
- RX功能

#### 版权和许可信息

- 无