钉钉小程序使用F2绘制饼图

最新推荐文章于 2023-11-09 09:14:31 发布

furtherpolar

最新推荐文章于 2023-11-09 09:14:31 发布

阅读量1.3k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/furtherpolar/article/details/126421085

版权

钉钉小程序使用F2绘制饼图

npm下载F2图表：

npm install @antv/my-f2

.axml：

<view id="container1" class="f2-chart">
  <f-canvas onInit="onInitChart"></f-canvas> 
</view>

.json:

{
  "usingComponents": {
    "f-canvas": "@antv/my-f2"
    }
}

.js

import F2 from '@antv/f2';
const PieLabel = require('@antv/f2/lib/plugin/pie-label');
F2.Chart.plugins.register([PieLabel]);
Page({
  data: {},
  onLoad() {},
  onInitChart(F2, config) {
    // 设置图表内边距
    config.padding = [60,50,0,50]; 
    // 创建图表
    const chart=new F2.Chart(config);
    // 初始化数据
    const data=[
      {
        name: '长津湖',
        percent: 0.32,
        a: '1',
      },
      {
        name: '我和我的父辈',
        percent: 0.16,
        a: '1',
      },
      {
        name: '失控玩家',
        percent: 0.08,
        a: '1',
      },
      {
        name: '宝可梦',
        percent: 0.04,
        a: '1',
      },
      {
        name: '峰爆',
        percent: 0.02,
        a: '1',
      },
      {
        name: '其他',
        percent: 0.01,
        a: '1',
      },
      {
        name: '未知',
        percent: 0.005,
        a: '1',
      },
    ];
    // 数据绑定
    chart.source(data);
    chart.coord({
      // type的属性：饼图：polar,柱形：rect
      // type: 'rect',
      type:'polar',
      // transposed：转置,可设为true或false
      transposed:true
    });
    // 配置图形形状interval:柱形或弧形,一般构成柱状图、饼图等图表
    // position:配置坐标轴
    // color配置颜色,也可使用如color('字段名',['颜色','颜色',...])的方式自己定义
    chart.interval().position('a*percent').color('name').adjust('stack');
    // axis配置坐标轴,这里false表示不渲染
    chart.axis(false);
    // 对饼图的标签进行设置,sidePadding表示文本距离画布左右两边的距离
    // label1和label2分别对应图中的上下文字,可在return中进行样式的设置
    chart.pieLabel({
      sidePadding:10,
      label1:(data, color) => {
        return {
          text: data.name,
          fill: color,
        };
      },
      label2:(data) => {
        return {
          fill: '#000000',
          text:data.percent,
          fontWeight: 500,
          fontSize: 10,
        };
      }
    });
    // 配置tooltip
    chart.tooltip(false);
    // legend配置图例,设为false为不显示
    // position表示显示的位置,包括top bottom left right,不设置默认显示在顶部
    // chart.legend({ 
    //   position: 'bottom',
    // });
    chart.legend(false);
    chart.render();
    return chart;
  }
});