antv/f2开发仪表盘！

   最近开发了一款类似于支付宝财富的h5项目，内嵌App中，项目使用的是react+hook+typescript , 需求中基金详情页面需要仪表盘类型的效果，前期经过调研最终选择antv/f2,奉上链接：https://f2.antv.vision/zh 

先放上效果图，给大家分享一下思路。

需求分解

1:首先需要最外层刻度270度半圆弧

2:其次需要270度内圆渐变半圆弧

最开始的想法是在f2生态圈中找找类似的效果因为f2生态资源不是很丰富，所以后面就自己从0开始了。

1:首先循环出最外层的刻度，这里用到的是f2的chart.source，循环出100个刻度出来，每个刻度代表1

 chart.source(data, {
      value: {
        type: 'linear',
        min: 0,
        max: 100,
        ticks: tickList(),
        nice: false,
      },
      length: {
        type: 'linear',
        min: 0,
        max: 10,
      },
      y: {
        type: 'linear',
        min: 0,
        max: 1,
      },
    });

tickList

const tickList = () => {
  let list = [];
  for (var i = 0; i <= 100; i++) {
    list.push(i);
  }
  return list;
};

2:画出内圆，灰色圆环打底，渐变色表示进度

 chart.guide().arc({
      start: [startTotal, 0.8],
      end: [endTotal, 0.8],
      // radius:0,
      style: {
        strokeStyle: '#ccc',
        lineWidth: 15,
        lineCap: 'square', // 设置
      },
    });
    chart.guide().arc({
      // 最外层线
      start: [0, 0.8],
      end: [data[0].value, 0.8],
      style: {
        strokeStyle: colorfilter(score)!.gradualcolor,
        lineWidth: 15,
      },
    });

附上组件代码，有兴趣的朋友可以看看

  const linecharts = () => {
    let startTotal = +score > 1 ? 3.2 : 2;
    let endTotal = +score > 1 ? 96 : 98;
    const chart = new F2.Chart({
      el: DashboardEl.current,
      pixelRatio: window.devicePixelRatio,
      padding: [0, 0, 0, 0],
      animate: false,
    });

    chart.source(data, {
      value: {
        type: 'linear',
        min: 0,
        max: 100,
        ticks: tickList(),
        nice: false,
      },
      length: {
        type: 'linear',
        min: 0,
        max: 10,
      },
      y: {
        type: 'linear',
        min: 0,
        max: 1,
      },
    });

    chart.coord('polar', {
      inner: 0,
      startAngle: -1.25 * Math.PI,
      endAngle: 0.25 * Math.PI,
    });
    //配置value轴刻度线
    chart.axis('value', {
      tickLine: {
        strokeStyle: colorfilter(score)!.bordercolor,
        lineWidth: 1.5,
        length: -3,
      },
      label: null,
      grid: null,
      line: null,
    });
    chart.axis('y', false);
    chart.guide().clear();
    chart.guide().arc({
      start: [startTotal, 0.8],
      end: [endTotal, 0.8],
      // radius:0,
      style: {
        strokeStyle: '#ccc',
        lineWidth: 15,
        lineCap: 'square', // 设置
      },
    });
    chart.guide().arc({
      // 最外层线
      start: [0, 0.8],
      end: [data[0].value, 0.8],
      style: {
        strokeStyle: colorfilter(score)!.gradualcolor,
        lineWidth: 15,
      },
    });

    chart
      .point()
      .position('value*y')
      .size(0)
      .color('');

    chart.render();
  };