使用antv2画三角形雷达图

最新推荐文章于 2024-08-23 11:53:33 发布

linjyuan

最新推荐文章于 2024-08-23 11:53:33 发布

阅读量1.6k

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/l1134/article/details/121401765

版权

本次是使用React框架来实现，用vue或者其他框架，也是一样的道理。
直接上代码：

import React, { FC, useEffect } from 'react';
import F2, { Chart } from '@antv/f2';
import _ from 'lodash';
interface TriangleCardProps {}

// 三角形雷达图
const TriangleCard: FC<TriangleCardProps> = () => {
  const data = [
    {
      item: '服务能力',
      score: 2050,
    },
    {
      item: '营销能力',
      score: 1050,
    },
    {
      item: '装维能力',
      score: 2990,
    },
  ];
  useEffect(() => {
    const chart = new Chart({
      id: 'triangle',
      padding: [40, 0, 0, 0],
      appendPadding: 0,
      pixelRatio: window.devicePixelRatio,
    });
    // chart.tooltip(false); //提示信息关闭
    chart.legend(false); //隐藏图例
    chart.coord('polar'); //选择极坐标系
    chart.source(data, {
      score: {
        min: 0,
        max: 3000,
        nice: true,
        tickCount: 0,
        alias: '值',
        values: [],
        // formatter: (data) => {
        //   console.log(data);
        //   return '';
        // },
      },
    });

    chart.axis('score', {
      label: null, //不显示坐标轴文本
      line: {
        top: false,
      },
    });
    // chart.axis(false);//不渲染坐标轴
    chart
      .area()
      .position('item*score')
      .color('#67CA83')
      .animate({
        appear: {
          animation: 'groupWaveIn',
        },
      });
    chart
      .line()
      .position('item*score')
      .color('#67CA83')
      .shape('line')
      .animate({
        appear: {
          animation: 'groupWaveIn',
        },
      });
    chart
      .point()
      .position('item*score')
      .color('#67CA83')
      .style({
        stroke: '#fff',
        lineWidth: 1,
      })
      .animate({
        appear: {
          delay: 1000,
        },
      });

    chart.render();
  }, []);
  return (
    <div style={{ width: '100%', margin: 'auto' }}>
      <canvas id="triangle" style={{ width: '100%', height: '222px' }}></canvas>
    </div>
  );
};
export default TriangleCard;