关于在小步伐项目中使用图表插件AntV（即F2）

　前言：以前嘛从开发H5和各种图表系统被拉到来开发小步伐，拿到的一个项目里面就涉及几个图表，用canvas是能实现效果，但是周期长而且还不一定悦目稳定。所以嘛就上网找了相干资料。发现有Echarts为小步伐专门改写的一套，但是范例不是很全，就转到了AntV这里来，阿里写的F2内容也挺全的。所以就接纳了。在这里贴链接感谢这位码友的分享给我的灵感先 https://www.jianshu.com/p/6b9fe45f799f 。然后直接上代码（代码是经过项目需求更改的，仅做参考）如果找不到可以直接用下面我这个：GitHub - FreeGrowth/f2-canvas
（/* 截图小步伐为本人开发。转载请带上本文URL地点和出处，尊重劳动结果，谢谢 */）
1.如何引入F2在小步伐中
先下载上面的GitHub地点中的代码压缩包，然后把里面的f2-canvas整个文件夹放到你的项目当中，路径要记得。如图

2. 在你所要用到的页面中import进去，引入的地方分别是json和js文件（当然也可以在app.js和app.json中引入）切记，两个都要引入哦
js引入：import F2 from '../../common/f2-canvas/lib/f2'; （路径按照你本身放的路径去改）
json引入如下： 

1. {
2.   "usingComponents": {
3.     "ff-canvas": "../../common/f2-canvas/f2-canvas" // 这里是路径
4.   }
5. }

复制代码

3. 一切就绪后开始撸图表啦，wxml要先写好对应的容器宽高，一定要给宽高

1. <view class="pie-view">
2.        <ff-canvas id="pieSelect" canvas-id="pieSelect" opts="{{ optspie }}"> </ff-canvas>
3. </view>

复制代码

　这里的id可以任意给，但canvas-id最好按照F2的指定图表id来，详细可以看F2的demo。 opts绑定的是对应的数据变量名
css如下：（不给它宽高会报错的～）

1. #pieSelect {
2.   width: 600rpx;
3.   height: 500rpx;
4. }

复制代码

4.这里是js代码区域（仅展示项目中所需要用到的功能代码，更多的功能可以参考AntV和F2的API） 这里要写在onLoad是因为要在页面进来时间就开始数据图表渲染，所以只能作为借鉴哦～

1. Page({
3. 　　data: {
4. 　　　　optspie: {}, // 资金占比饼状图
5. 　　},
6.   onLoad(options) {
7.     const that = this // 绑定好this指向
9.     // 资金占比模块-资金占比饼状图
10.     let pie = null // 先声明一个变量用以后面做F2的new
11.     function pieChart(canvas, width, height) { // F2实现回调的方法，方法名用来最后赋值绑定
12.     //这里是为让请求接口返回数据能直接赋值给到图表数据渲染，所以用的ES6写法
13.       new Promise(function(resolve,reject){
14.         wx.request({
15.           url: '这里是请求的接口，记得写上自己的～',
16.           data: { code },
17.           header: {
18.             'content-type': 'application/json'
19.           },
20.         // 请求成功后执行
21.           success: function (res) {
22.             const dataNum =  res.data.response.day_fund_info
23.             if (dataNum.length === 0 || !dataNum) {
24.               console.log('饼状图没有数据')
25.               that.setData({
26.                 pieDataShow: true
27.               })
28.             } else {
29.             // 这里是将返回的字符数据转换为数字以方便图表
30.               const large_deal_amount = Number(dataNum.large_deal_amount)
31.               const mid_deal_amount = Number(dataNum.mid_deal_amount)
32.               const small_deal_amount = Number(dataNum.small_deal_amount)
33.               if (large_deal_amount === 0 && mid_deal_amount === 0 && small_deal_amount === 0) {
34.                 console.log('饼状图数据都是0')
35.                 that.setData({
36.                   pieDataShow: true
37.                 })
38.                 return
39.               }
40.               // 赋值对应值给到饼图（也可以把percent给改成纯数字这样你就能在自己的项目上看到效果了）
41.               let pieData = [
42.                 { name: '主力', percent: large_deal_amount,},
43.                 { name: '跟风', percent: mid_deal_amount,},
44.                 { name: '散户', percent: small_deal_amount,}
45.               ]
46.               resolve(pieData) // 将数据返回给到new上进行then索取
47.             }
48.           }
49.         })
50.       }).then((data) => {
51.         const total = data[0].percent + data[1].percent + data[2].percent // 计算总数
52.         let brunt = data[0].percent / total * 100 // 计算主力占比
53.         let Retail = data[1].percent / total * 100 // 计算跟风占比
54.         let follow = data[2].percent / total * 100 // 计算散户占比
55.         // 饼图的图例配置
56.         const map = {
57.           '主力': `${brunt.toFixed(2)}%`,
58.           '跟风': `${Retail.toFixed(2)}%`,
59.           '散户': `${follow.toFixed(2)}%`
60.         };
61.         // 刚刚声明的变量就是用在这里，new到F2的指定
62.         pie = new F2.Chart({
63.           el: canvas,
64.           width,
65.           height
66.         });
67.         pie.source(data); // data就是传入的数据。给到F2
68.         // 图例位置
69.         pie.legend({
70.           position: 'right', // 放在右边展示
71.           itemFormatter(val) { //配置图例自定义展示内容
72.             return val + '  ' + map[val];
73.           },
74.           nameStyle: {
75.             fontSize: '13', // 图例文本大小
76.             fill: '#ffffff' // 图例文本颜色
77.           },
78.           marker: {
79.             symbol: 'circle', // marker 的形状（圆点）
80.             radius: 4 // 半径大小
81.           }
82.         });
83.         pie.tooltip(false); // 是否显示工具箱
84.         pie.coord('polar', { // 匹配饼状图的元素圆度等
85.           transposed: true,
86.           radius: 0.85,
87.           innerRadius: 0.618
88.         });
89.         pie.axis(false); // 关闭XY轴等线条
90.         pie.interval()
91.           .position('a*percent') // a为默认，percent即数据中的percent数值
92.           .color('name', ['#FF4381', '#F2B356', '#F25E54']) // 饼图对应颜色
93.           .adjust('stack')
94.           .style({
95.             lineWidth: 1,
96.             stroke: '#fff',
97.             lineJoin: 'round',
98.             lineCap: 'round'
99.           });
100.         pie.interaction('pie-select', {
101.           cancelable: true, // 允许取消选中
102.           animate: { // 选中动画效果
103.             duration: 300,
104.             easing: 'backOut'
105.           }
106.         });
107.         pie.render(); // 执行
108.       })
109.         return pie; //最后返回给到pie
110.     }
111. 　　}
112. })

复制代码

5.以上js和wxml完成后，还有一个紧张步骤，在需要的地方或者要显示的时间赋值给到一开始opts绑定的变量中

1. this.setData({
2.       optspie: {
3.         onInit: pieChart //这里就是在js中用到的方法名
4.       }
5.     })

复制代码

6.末了实现效果如图：

末了：当然不止这一个环形饼图，还有其他的柱状图折线图等。都是一样的逻辑，改不同的id和render前不同Geometry对象即可，附带官方API：Geometry · 语雀
（末了再贴几张图）（/* 转载请带上本文URL地点和出处，尊重劳动结果，谢谢 */）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。