taro + vu e + F2实现基金净值走势图，支持X轴Y轴交叉十字滑动显示

这个需求可以分为两部分来实现：

1. 使用 Taro + Vue 实现基金净值走势图
2. 使用 F2 实现 X 轴 Y 轴交叉十字滑动显示

下面是一个简单的实现过程：

1. 使用 Taro 和 Vue 创建项目

首先，我们需要使用 Taro 和 Vue 创建一个新项目。具体步骤如下：

npm install -g @tarojs/cli
taro init fund-chart --template vue
cd fund-chart
npm run dev:weapp

启动后，我们可以在微信开发者工具中查看效果。

2. 实现基金净值走势图

在 Vue 组件中，我们可以使用 ECharts 或者 F2 来实现基金净值走势图。这里我们使用 F2。

首先，我们需要安装 F2：

npm install @antv/f2 --save

然后，在 Vue 组件中引入 F2：

import F2 from '@antv/f2'

接着，在 `mounted` 阶段初始化 F2：

mounted() {
  const canvas = this.$refs.canvas
  const chart = new F2.Chart({
    el: canvas,
    pixelRatio: window.devicePixelRatio,
  })

  // ...
}

然后，我们需要使用 F2 的 API 来绘制基金净值走势图：

chart.source(data, {
  time: {
    type: 'timeCat',
    mask: 'yyyy-mm-dd',
  },
  value: {
    tickCount: 5,
    min: Math.floor(minValue),
    max: Math.ceil(maxValue),
  },
})

chart.axis('time', {
  label: {
    textAlign: 'center',
    fill: '#979797',
  },
  tickLine: {
    length: 4,
    stroke: '#b7b7b7',
  },
  line: {
    top: true,
    stroke: '#b7b7b7',
  },
})

chart.axis('value', {
  label: {
    fill: '#979797',
  },
  grid: {
    stroke: '#d8d8d8',
    lineDash: [2],
  },
})

chart.line().position('time*value').color('#1890ff').shape('smooth')
chart.point().position('time*value').color('#1890ff').shape('circle')

chart.render()

完整的代码如下：

<template>
  <view>
    <canvas ref="canvas" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

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

export default {
  name: 'FundChart',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    const canvas = this.$refs.canvas
    const chart = new F2.Chart({
      el: canvas,
      pixelRatio: window.devicePixelRatio,
    })

    const minValue = Math.min(...this.data.map(item => item.value))
    const maxValue = Math.max(...this.data.map(item => item.value))

    chart.source(this.data, {
      time: {
        type: 'timeCat',
        mask: 'yyyy-mm-dd',
      },
      value: {
        tickCount: 5,
        min: Math.floor(minValue),
        max: Math.ceil(maxValue),
      },
    })

    chart.axis('time', {
      label: {
        textAlign: 'center',
        fill: '#979797',
      },
      tickLine: {
        length: 4,
        stroke: '#b7b7b7',
      },
      line: {
        top: true,
        stroke: '#b7b7b7',
      },
    })

    chart.axis('value', {
      label: {
        fill: '#979797',
      },
      grid: {
        stroke: '#d8d8d8',
        lineDash: [2],
      },
    })

    chart.line().position('time*value').color('#1890ff').shape('smooth')
    chart.point().position('time*value').color('#1890ff').shape('circle')

    chart.render()
  },
}
</script>

3. 实现 X 轴 Y 轴交叉十字滑动显示

在 F2 中，我们可以使用 `guide()` 函数来添加十字线。具体步骤如下：

首先，我们需要在 `mounted` 阶段添加 `guide()`：

const guide = new F2.Guide(chart)

然后，我们需要在 `onTouchstart`、`onTouchmove`、`onTouchend` 阶段实现交叉十字线的显示：

canvas.addEventListener('touchstart', ev => {
  const { x, y } = chart.getXY(ev.touches[0])
  const value = chart.get('valueScale').invert(y)

  guide.line({
    start: [0, y],
    end: [chart.get('width'), y],
    style: {
      stroke: '#d8d8d8',
      lineWidth: 1,
      lineDash: [2],
    },
  })
  guide.line({
    start: [x, 0],
    end: [x, chart.get('height')],
    style: {
      stroke: '#d8d8d8',
      lineWidth: 1,
      lineDash: [2],
    },
  })
  guide.text({
    position: [x, y],
    content: `${value.toFixed(2)}`,
    offsetY: -10,
    style: {
      fill: '#666',
      fontSize: 12,
      fontWeight: 'bold',
    },
  })

  chart.render()
})

canvas.addEventListener('touchmove', ev => {
  const { x, y } = chart.getXY(ev.touches[0])
  const value = chart.get('valueScale').invert(y)

  guide.line({
    start: [0, y],
    end: [chart.get('width'), y],
    style: {
      stroke: '#d8d8d8',
      lineWidth: 1,
      lineDash: [2],
    },
  })
  guide.line({
    start: [x, 0],
    end: [x, chart.get('height')],
    style: {
      stroke: '#d8d8d8',
      lineWidth: 1,
      lineDash: [2],
    },
  })
  guide.text({
    position: [x, y],
    content: `${value.toFixed(2)}`,
    offsetY: -10,
    style: {
      fill: '#666',
      fontSize: 12,
      fontWeight: 'bold',
    },
  })

  chart.render()
})

canvas.addEventListener('touchend', ev => {
  guide.clear()
  chart.repaint()
})

完整的代码如下：

<template>
  <view>
    <canvas ref="canvas" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

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

export default {
  name: 'FundChart',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    const canvas = this.$refs.canvas
    const chart = new F2.Chart({
      el: canvas,
      pixelRatio: window.devicePixelRatio,
    })

    const minValue = Math.min(...this.data.map(item => item.value))
    const maxValue = Math.max(...this.data.map(item => item.value))

    chart.source(this.data, {
      time: {
        type: 'timeCat',
        mask: 'yyyy-mm-dd',
      },
      value: {
        tickCount: 5,
        min: Math.floor(minValue),
        max: Math.ceil(maxValue),
      },
    })

    chart.axis('time', {
      label: {
        textAlign: 'center',
        fill: '#979797',
      },
      tickLine: {
        length: 4,
        stroke: '#b7b7b7',
      },
      line: {
        top: true,
        stroke: '#b7b7b7',
      },
    })

    chart.axis('value', {
      label: {
        fill: '#979797',
      },
      grid: {
        stroke: '#d8d8d8',
        lineDash: [2],
      },
    })

    chart.line().position('time*value').color('#1890ff').shape('smooth')
    chart.point().position('time*value').color('#1890ff').shape('circle')

    const guide = new F2.Guide(chart)

    canvas.addEventListener('touchstart', ev => {
      const { x, y } = chart.getXY(ev.touches[0])
      const value = chart.get('valueScale').invert(y)

      guide.line({
        start: [0, y],
        end: [chart.get('width'), y],
        style: {
          stroke: '#d8d8d8',
          lineWidth: 1,
          lineDash: [2],
        },
      })
      guide.line({
        start: [x, 0],
        end: [x, chart.get('height')],
        style: {
          stroke: '#d8d8d8',
          lineWidth: 1,
          lineDash: [2],
        },
      })
      guide.text({
        position: [x, y],
        content: `${value.toFixed(2)}`,
        offsetY: -10,
        style: {
          fill: '#666',
          fontSize: 12,
          fontWeight: 'bold',
        },
      })

      chart.render()
    })

    canvas.addEventListener('touchmove', ev => {
      const { x, y } = chart.getXY(ev.touches[0])
      const value = chart.get('valueScale').invert(y)

      guide.line({
        start: [0, y],
        end: [chart.get('width'), y],
        style: {
          stroke: '#d8d8d8',
          lineWidth: 1,
          lineDash: [2],
        },
      })
      guide.line({
        start: [x, 0],
        end: [x, chart.get('height')],
        style: {
          stroke: '#d8d8d8',
          lineWidth: 1,
          lineDash: [2],
        },
      })
      guide.text({
        position: [x, y],
        content: `${value.toFixed(2)}`,
        offsetY: -10,
        style: {
          fill: '#666',
          fontSize: 12,
          fontWeight: 'bold',
        },
      })

      chart.render()
    })

    canvas.addEventListener('touchend', ev => {
      guide.clear()
      chart.repaint()
    })

    chart.render()
  },
}
</script>

根据以上实现，我们就可以在 Taro + Vue 中使用 F2 实现基金净值走势图，并支持 X 轴 Y 轴交叉十字滑动显示了。