这个需求可以分为两部分来实现：
1. 使用 Taro + Vue 实现基金净值走势图
2. 使用 F2 实现 X 轴 Y 轴交叉十字滑动显示
下面是一个简单的实现过程：
1. 使用 Taro 和 Vue 创建项目
首先，我们需要使用 Taro 和 Vue 创建一个新项目。具体步骤如下：
```sh
npm install -g @tarojs/cli
taro init fund-chart --template vue
cd fund-chart
npm run dev:weapp
```
启动后，我们可以在微信开发者工具中查看效果。
2. 实现基金净值走势图
在 Vue 组件中，我们可以使用 ECharts 或者 F2 来实现基金净值走势图。这里我们使用 F2。
首先，我们需要安装 F2：
```sh
npm install @antv/f2 --save
```
然后，在 Vue 组件中引入 F2：
```js
import F2 from '@antv/f2'
```
接着，在 `mounted` 阶段初始化 F2：
```js
mounted() {
const canvas = this.$refs.canvas
const chart = new F2.Chart({
el: canvas,
pixelRatio: window.devicePixelRatio,
})
// ...
}
```
然后，我们需要使用 F2 的 API 来绘制基金净值走势图：
```js
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()
```
完整的代码如下：
```vue
<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()`：
```js
const guide = new F2.Guide(chart)
```
然后，我们需要在 `onTouchstart`、`onTouchmove`、`onTouchend` 阶段实现交叉十字线的显示：
```js
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()
})
```
完整的代码如下：
```vue
<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 轴交叉十字滑动显示了。
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
