React项目中引入F2可视化组件库
之前在React项目上开发一直使用的是有ECharts，最近接到了移动端可视化的需求，本来想直接复用ECharts的，但网上搜了一下发现移动端使用ECharts有点重，所以就找了一下移动端我解决方案，最终选择了F2。
但是F2的文档写得有点...和实际使用不太一样，本文做一个小总结。
安装
需要安装2个包。
- @antv/f2
- @antv/f2-react
使用 yarn 直接安装
yarn add @antv/f2
yarn add @antv/f2-react
项目中引用
这里可能因为版本的一些因素，和官网提供的Demo不太一样，在React中可以按如下的方法。
以实现一个环形图为例。
1import React from "react";
2import { Chart, Interval, Legend } from "@antv/f2";
3import Canvas from "@antv/f2-react";
4
5const data = [
6 {
7 name: "股票类",
8 percent: 83.59,
9 a: "1"
10 },
11 {
12 name: "债券类",
13 percent: 2.17,
14 a: "1"
15 },
16 {
17 name: "现金类",
18 percent: 14.24,
19 a: "1"
20 }
21];
22
23export default function App() {
24 return (
25 <Canvas>
26 <Chart
27 scale={{
28 percent: {
29 formatter: function formatter(val) {
30 return val + "%";
31 }
32 }
33 }}
34 data={data}
35 coord={{
36 type: "polar",
37 transposed: true,
38 innerRadius: 0.7,
39 radius: 0.85
40 }}
41 >
42 <Interval
43 x="a"
44 y="percent"
45 adjust="stack"
46 color={{
47 field: "name",
48 range: ["#FE5D4D", "#3BA4FF", "#737DDE"]
49 }}
50 />
51 <Legend
52 position="right"
53 itemFormatter={(val) => {
54 return val + "test";
55 }}
56 />
57 </Chart>
58 </Canvas>
59 );
60}
效果如图：
遇到的问题
你可能会发现上面的Legend中的itemFormatter并没有生效，比如我想把百分比显示出来，一直不成功。后面在百度、谷歌、stackoverflow、github上一顿搜之后，发现其相关资料少得可怜。
为难之际，想起一个破罐子破摔的方式，直接看源码。定位到 Legend 的实现。
https://github.com/antvis/F2/blob/master/packages/f2/src/components/legend/legendView.tsx
核心的问题在这里，在执行itemFormatter的前提是value有值，而如果不手动传入item这个Props的话，自动获取的item是不包含这个字段的。所以解决方案就是先自行传入一个item的Props。改进后的代码：
1import React from "react";
2import { Chart, Interval, Legend } from "@antv/f2";
3import Canvas from "@antv/f2-react";
4
5const data = [
6 {
7 name: "股票类",
8 value: 83.59,
9 color: "red",
10 a: "1"
11 },
12 {
13 name: "债券类",
14 value: 2.17,
15 color: "blue",
16 a: "1"
17 },
18 {
19 name: "现金类",
20 value: 14.24,
21 color: "green",
22 a: "1"
23 }
24];
25
26export default function App() {
27 return (
28 <Canvas>
29 <Chart
30 scale={{
31 percent: {
32 formatter: function formatter(val) {
33 return val + "%";
34 }
35 }
36 }}
37 data={data}
38 coord={{
39 type: "polar",
40 transposed: true,
41 innerRadius: 0.7,
42 radius: 0.85
43 }}
44 >
45 <Interval
46 x="a"
47 y="value"
48 adjust="stack"
49 color={{
50 field: "name",
51 range: ["red", "blue", "green"]
52 }}
53 />
54 <Legend
55 position="right"
56 items={data}
57 itemFormatter={(val) => {
58 return val + "%";
59 }}
60 />
61 </Chart>
62 </Canvas>
63 );
64}
效果如图：
后话
写了一个在线的Demo，有兴趣的可以参考。
虽然问题解决了，但我感觉还是可能我的用法不对，欢迎各位大佬指正。