进度条 - Progress

[wuhaiyang]

进度条 - Progress

进度条用于展示数据、业绩等实际值与目标值的比例、当前进度及完成情况。由三部分组成：目标值部分、实际值部分、统计文字部分。

开始使用

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.progress().style('arc', `true | false`).data({ percent: 0.75 });

chart.render();

选项

由上述可知，进度条由三个部分组合而成：前景mark、背景 mark、文字mark，为了区分设置不同 mark 属性，通过「属性前缀」来实现，即：

• 前景 mark：fore
• 背景 mark：fore
• 文字 mark：text

API	描述
data	支持两种数据格式： 1. { percent: 0.75} 2. { current: 100, target: 400 }
style#arc	进度条展现形态：true 环形、false 条形
style	设置添加前缀 fore、 back 、text 指定样式

由上述可知，进度条由三个部分组合而成：内部图形 mark、外部图形 mark，文字mark，为了区分不同 mark 属性，通过「属性前缀」来实现，即：

常见样式配置如下：

API		描述	默认值
style	foreFill	设置背景 mark 背景色	#D0D0D0
	backFill	设置前景 mark 背景色	#30BF78
	textFill	设置文本 mark 颜色	#888
	textContent	环形场景，自定义文本显示 (current, target): string => {} or string
scale	scale#color	设置前景mark 颜色通道比例尺：chart.scale({color: { domain: [100, 250, 300], range: ['#F4664A', '#FAAD14', 'green'],},})
animate	foreAnimate backAnimate textAnimate	设置前景/背景/文本动画

其他属性透传，对三个mark 都生效。

案例

条形-自定义图形区间颜色

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.progress()
  .style('arc', false)
  .data({
    target: 400,
    current: 300,
  })
  .scale({
    color: {
      domain: [100, 250, 300],
      range: ['#F4664A', '#FAAD14', 'green'],
    },
  })
  .style({ height: 100 })
  .label({
    text: 'y',
    style: {
      fill: (d) => (d.y === target ? 'transparent' : 'white'),
    },
  }Ï);

chart.render();

环形-自定义文字

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart.progress()
  .data({ target: 400, current: 300, })
  .style({
    textContent: (current, target) => {
      return `得分：${current}\n占比：${(current / target) * 100}%`;
    },
    textFontSize: 30,
    textFill: 'rgba(74, 74, 74, 1)',
  });

chart.render();

环形-自定义外层图形

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

chart
  .progress()
  .graphType('arc')
  .data({ percent: 0.7 })
  .style({
    // 自定义外层阴影效果
    foreRadius: 26,
    foreShadowColor: 'color',
    foreShadowBlur: 10,
    foreShadowOffsetX: -1,
    foreShadowOffsetY: -1,
  })
	.scale({
    // 自定义外层图形颜色
    color: {
      range: ['rgba(250, 57, 57, 1)'],
    },Ï
  })
	.animate({
    foreEnter: { type: 'waveIn', duration: 1000, delay: 1000 },
  })

chart.render();