VxRateLine

资产走势小组件

引入组件

import VxRateLine from '@/components/vx-rate-line/index.vue';
export default {
  components:{
    VxRateLine
  }
}

使用指南

本项目发布私服，因此使用npm安装需要修改镜像： npm config set registry http://registry.npm.csii.com.cn 然后由于本项目依赖clay.js，因此需要安装clay.js： npm install --save @csii/vx-clay 至此，准备工作就做好了。

代码演示

<template>
  <div>
    <h2>收益率走势图</h2>
    <vx-rate-line ref="rateline" @get-lineClick="getLine"> </vx-rate-line>
  </div>
</template>
<script>
import VxRateLine from '@/components/vx-rate-line/index.vue';
export default {
  name: 'name',
  components: {
    VxRateLine,
  },
  data() {
    return {
      List: [
        {
          date: '2021-10-01 00:00:00.0',
          netWorth: '-50.45',
        },
        {
          date: '2021-10-02 00:00:00.0',
          netWorth: '62.56',
        },
      ],
    };
  },
  async created() {
    await this.getDescritpData();
    // 判断是否展示折线图(开放式时展示)
    if (this.financeInfo.interestWay === '0') {
      this.getLine('-1M');
    }
  },
  methods: {
    /**
     * 折线图日期切换获取对应数据
     * @param {String} time 切换对应的日期
     */
    getLine1(time) {
      this.$refs.rateline.painterAsset(time, document.documentElement.style.getPropertyValue('--color-primary'), this.list);
    },
  },
};
</script>

这里的color为自定义数据线条的颜色，data为接口查得的数据,例[{currency: "CNY" date: "2021-06-23" incomeRate: "9" incomeUnit: "10" netWorth: "10" prdCode: "BLTF202007" prdIncome: "10" prdName: "test2" rate: "0%" releaseDate: "2021-06-23" totNav: "10" yield: "20"}]

API

VxRateLine Props

VxRateLine Events

@click(type,color,data)

Current Tags

• 0.0.1                                ...           latest (2 years ago)

1 Versions

• 0.0.1                                ...           2 years ago