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

爱上大树的小猪

于 2024-12-16 10:30:24 发布

阅读量1.6k

点赞数 29

分类专栏：小程序文章标签：小程序 javascript vue.js html5 css3

本文链接：https://blog.youkuaiyun.com/abcd2468sfdsfsd/article/details/144499546

版权

小程序专栏收录该内容

1 篇文章

订阅专栏

　前言：以前嘛从开发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引入如下：

{
  "usingComponents": {
    "ff-canvas": "../../common/f2-canvas/f2-canvas" // 这里是路径
  }
}

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

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

　这里的id可以随便给，但canvas-id最好按照F2的指定图表id来，具体可以看F2的demo。 opts绑定的是对应的数据变量名

css如下：（不给它宽高会报错的～）

#pieSelect {
  width: 600rpx;
  height: 500rpx;
}

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

Page({
 
　　data: {
　　　　optspie: {}, // 资金占比饼状图
　　},
  onLoad(options) {
    const that = this // 绑定好this指向

    // 资金占比模块-资金占比饼状图
    let pie = null // 先声明一个变量用以后面做F2的new
    function pieChart(canvas, width, height) { // F2实现回调的方法，方法名用来最后赋值绑定
    //这里是为让请求接口返回数据能直接赋值给到图表数据渲染，所以用的ES6写法
      new Promise(function(resolve,reject){ 
        wx.request({
          url: '这里是请求的接口，记得写上自己的～',
          data: { code },
          header: {
            'content-type': 'application/json'
          },
        // 请求成功后执行
          success: function (res) {
            const dataNum =  res.data.response.day_fund_info
            if (dataNum.length === 0 || !dataNum) {
              console.log('饼状图没有数据')
              that.setData({
                pieDataShow: true
              })
            } else {
            // 这里是将返回的字符数据转换为数字以方便图表
              const large_deal_amount = Number(dataNum.large_deal_amount)
              const mid_deal_amount = Number(dataNum.mid_deal_amount)
              const small_deal_amount = Number(dataNum.small_deal_amount)
              if (large_deal_amount === 0 && mid_deal_amount === 0 && small_deal_amount === 0) {
                console.log('饼状图数据都是0')
                that.setData({
                  pieDataShow: true
                })
                return
              }
              // 赋值对应值给到饼图（也可以把percent给改成纯数字这样你就能在自己的项目上看到效果了）
              let pieData = [
                { name: '主力', percent: large_deal_amount,},
                { name: '跟风', percent: mid_deal_amount,},
                { name: '散户', percent: small_deal_amount,}
              ]
              resolve(pieData) // 将数据返回给到new上进行then索取
            }
          }
        })
      }).then((data) => {
        const total = data[0].percent + data[1].percent + data[2].percent // 计算总数
        let brunt = data[0].percent / total * 100 // 计算主力占比
        let Retail = data[1].percent / total * 100 // 计算跟风占比
        let follow = data[2].percent / total * 100 // 计算散户占比
        // 饼图的图例配置
        const map = {
          '主力': `${brunt.toFixed(2)}%`,
          '跟风': `${Retail.toFixed(2)}%`,
          '散户': `${follow.toFixed(2)}%`
        };
        // 刚刚声明的变量就是用在这里，new到F2的指定
        pie = new F2.Chart({
          el: canvas,
          width,
          height
        });
        pie.source(data); // data就是传入的数据。给到F2
        // 图例位置
        pie.legend({
          position: 'right', // 放在右边展示
          itemFormatter(val) { //配置图例自定义展示内容
            return val + '  ' + map[val];
          },
          nameStyle: {
            fontSize: '13', // 图例文本大小
            fill: '#ffffff' // 图例文本颜色
          },
          marker: {
            symbol: 'circle', // marker 的形状（圆点）
            radius: 4 // 半径大小
          }
        });
        pie.tooltip(false); // 是否显示工具箱
        pie.coord('polar', { // 匹配饼状图的元素圆度等
          transposed: true,
          radius: 0.85,
          innerRadius: 0.618
        });
        pie.axis(false); // 关闭XY轴等线条
        pie.interval()
          .position('a*percent') // a为默认，percent即数据中的percent数值
          .color('name', ['#FF4381', '#F2B356', '#F25E54']) // 饼图对应颜色
          .adjust('stack')
          .style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          });
        pie.interaction('pie-select', {
          cancelable: true, // 允许取消选中
          animate: { // 选中动画效果
            duration: 300,
            easing: 'backOut'
          }
        });
        pie.render(); // 执行
      })
        return pie; //最后返回给到pie
    }
　　}
})

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

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

6.最后实现效果如图：

最后：当然不止这一个环形饼图，还有其他的柱状图折线图等。都是一样的逻辑，改不同的id和render前不同Geometry对象即可，附带官方API：Geometry · 语雀

（最后再贴几张图）（/* 转载请带上本文URL地址和出处，尊重劳动成果，谢谢 */）