taro + vu e + F2实现基金净值走势图 并且支持原生APP

要实现基金净值走势图，可以使用 F2 这个 JavaScript 的可视化图表库。而要在 Taro + Vue 中使用 F2，可以通过安装 `@antv/f2` 库来实现。

以下是一个简单的例子，展示如何在 Taro + Vue 中使用 F2 绘制基金净值走势图：

1. 安装 `@antv/f2` 库：

npm install @antv/f2 --save

2. 在 Taro + Vue 项目中引入 F2：

<template>
  <view class="container">
    <canvas id="chart"></canvas>
  </view>
</template>

<script>
import F2 from '@antv/f2'

export default {
  mounted() {
    const chart = new F2.Chart({
      el: 'chart',
      pixelRatio: window.devicePixelRatio,
    })

    const data = [/* 基金净值数据 */]
    chart.source(data)

    chart.line().position('date*netValue')
    chart.render()
  },
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 500px;
}
</style>

3. 编写基金净值数据获取逻辑：

async function getFundData() {
  const response = await fetch('https://domain.com/fundData.json')
  const data = await response.json()
  return data
}

4. 在 `mounted()` 中调用数据获取逻辑，并将数据传入图表：

<script>
import F2 from '@antv/f2'

export default {
  async mounted() {
    const chart = new F2.Chart({
      el: 'chart',
      pixelRatio: window.devicePixelRatio,
    })

    const data = await getFundData() // 获取基金净值数据
    chart.source(data)

    chart.line().position('date*netValue')
    chart.render()
  },
}
</script>

5. 如果要支持原生 App，可以使用 Taro 提供的 `@tarojs/plugin-platform-alipay` 插件，将项目打包成支付宝小程序或支付宝原生 App。

npm install @tarojs/plugin-platform-alipay --save-dev

然后在 `config/index.js` 中配置插件：

module.exports = {
  plugins: [
    ['@tarojs/plugin-platform-alipay', {
      appId: '123456789', // 修改为自己的支付宝开发者 AppId
    }],
  ],
}

最后使用以下命令打包项目：

npm run build:alipay

打包完成后，可以在支付宝开发者工具中预览或上传到支付宝商店。