微信小程序F2饼形图的引入和赋值

最新推荐文章于 2024-08-22 08:28:47 发布

零小星

最新推荐文章于 2024-08-22 08:28:47 发布

阅读量1.4k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_43773083/article/details/106420005

版权

本文介绍了如何在微信小程序中使用F2库创建饼形图，并详细讲解了将图表转化为图片的步骤，包括在f2-canvas.js中的操作以及在f2-canvas.wxml文件中的配置。最后展示了转化后的图片效果。

摘要由CSDN通过智能技术生成

js

import F2 from "../../../../components/f2-canvas/lib/f2"
let pie = null;
function setOption(pie,a,b,c,d,e) {
    // F2实现回调的方法，方法名用来最后赋值绑定
  var map = {
   
    '待检查': ((b/a)*100).toFixed(2)+'%',
    '处理中':((c/a)*100).toFixed(2)+'%',
    '流转中':((d/a)*100).toFixed(2)+'%',
    '已结束': ((e/a)*100).toFixed(2)+'%',
  };
  let data = [{
   
      name: '待检查',
      percent: b/a,
      a: '1'
    },
    {
   
      name: '处理中',
      percent: c/a,
      a: '1'
    },
    {
   
      name: '流转中',
      percent: d/a,
      a: '1'
    },
    {
   
      name: '已结束',
      percent: e/a,
      a: '1'
    }
  ];
  pie.source(data, {
   
    percent: {
   
      formatter: function formatter(val) {
   
        return val * 100 + '%';
      }
    }
  }); // data就是传入的数据。给到F2
  // 图例位置
  pie.legend({
   
    position: 'right',
    itemFormatter: function itemFormatter(val) {
   
      return val + '  ' + map[val];
    }
  });
  pie.tooltip(false);
  pie.coord('polar', {
   
    transposed: true,
    radius: 0.85
  });
  pie.axis(false);
  pie.interval().position(