需求背景：

图表库选型

老的项目中使用G2配置实现，配置零散，后期不好维护，在新的需求中，考虑重构

于是，调研了一波图表库，目前主流的图表库有echarts、highcharts、D3js、antv(G2, G6, F2)基于D3封装的react图表库rechart； 还有基于G2封装的react图表库viser、Bizcharts等等。还有关系图展示使用的Cytoscapejs；时序图常用工具库visjs等等 那么如何选择呢？

由于项目是react框架，所以考虑用react封装的图表库，大概去看了一遍BizCharts图表库，文档什么的感觉还是很完善的，并且GitHub上也一直在维护。素以决定了BizCharts，该图表库新的版本是V4.X

bizcharts.net/product/Biz…

问题

开始根据需求进行相关组件demo实现，柱状图、折线图、直方图、环状图都相对比较简单，根据文档基本都能实现，但是在实现子弹图的时候，文档上的demo都是有问题的；怎么办呢？

第一想到了去GitHub上找源代码去看，文档上的配置属性很多都已经废弃

github.com/alibaba/Biz…

后来去antv上找到了子弹图
g2plot.antv.vision/zh/docs/api…

献上经过近一天的探索，实现的demo代码

import React from 'react';
import ReactDOM from 'react-dom';
import { BulletChart } from 'bizcharts';

// 数据源
const mockData = [
  {
    title: "满意度",
    measures: [83],
    target: [80],
    ranges: [0, 10, 40, 75, 100],
  },
];

function Demo() {
  return (
    <BulletChart
      data={mockData}
      xField="title"
      yField="ranges"
      height={90}
      measureField="measures"
      rangeField="ranges"
      targetField="target"
      size={{
        measure: 10,
        range: 28,
        target: 25,
      }}
      color={{
        measure: ["#43467c"],
        target: ["#000000"],
        range: ["#b4ebbf", "#ffb1ac", "#ffdba1", "#abc9f0"],
      }}
      bulletStyle={{
        target: {
          width: 15,
          fill: "#000000",
        },
      }}
      yAxis={{
        tickCount: 11,
        top: true,
      }}
      legend={{
				custom: "true",
				position: "top",
				offsetX: 8,
				items: [
   				{
						name: "班平均分",
						marker: {
							symbol: "circle",
							style: {
								fill: "#43467c",
							},
						},
					},
					{
						name: "校平均",
						marker: {
							symbol: "line",
							style: {
								stroke: "#000000",
							},
						},
					},
					{
						name: "不及格",
						marker: {
							symbol: "circle",
							style: {
								fill: "#ffb1ac",
							},
						},
					},
					{
						name: "及格",
						marker: {
							symbol: "circle",
							style: {
								fill: "#ffdba1",
							},
						},
					},
					{
						name: "良好",
						marker: {
							symbol: "circle",
							style: {
								fill: "#abc9f0",
							},
						},
					},
					{
						name: "优秀",
						marker: {
							symbol: "circle",
							style: {
								fill: "#b4ebbf",
							},
						},
					},
				],
			}}
    />
  );
}

ReactDOM.render(<Demo />, mountNode);
复制代码