使用AntV F2实现仪表盘的例子

最新推荐文章于 2024-07-16 17:58:35 发布

Little_Pig_Bug

最新推荐文章于 2024-07-16 17:58:35 发布

阅读量2.1k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/105112133

版权

本文介绍如何利用AntV F2库创建仪表盘，特别是一个罗盘图表的例子。在开发移动端图表项目中，由于官方示例缺少罗盘图，作者参照G2实现了这一功能。遇到的问题包括数据类型要求为Number，以及特定版本号可能导致指针显示失效。解决方案包括使用clear()和setState方法解决数值覆盖和闪现问题。推荐查阅F2官方实例以获取更多帮助。

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

目前公司需要开发移动端图表项目，就选用了f2。目前没在官方实例里面找到罗盘的例子，就参考了G2的写了一个。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import F2 from '@antv/f2';
const color = ['#FF5961', '#FABE32', '#1FDE44'];


export default class PanelChart extends Component {

  static defaultProps = {
    panenlDataObj: {},
    chartId: ''
  };
  static propTypes = {
    panenlDataObj: PropTypes.object,
    chartId: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      chart: null
    };
  }

  componentWillReceiveProps(nextProps) {
    if (!Immutable.is(nextProps.panenlDataObj, this.props.panenlDataObj)) {
      this.changeMainChart(nextProps.panenlDataObj);
    }
  }

  draw = (chart, panenlDataObj) => {
    const lineWidth = 20;
    chart.guide().clear();
    // 绘制仪表盘背景
    chart.guide().arc({
      zIndex: 0,
      top: false,
      start: [0, 0.92],
      end: [100, 0.92],
      style: { // 底灰色
        stroke: '#CBCBCB',
        lineWidth
      }
    });
    chart.guide().arc({
      zIndex: 1,
      start: [0, 0.92],
      end: [40, 0.92],
      style: {
        stroke: color[0],