Antd Pro + BizCharts图标、地图详解（ps:又是一篇踩坑日记）

BizCharts图标地图（ps:又是一篇踩坑日记）

写在前面：

在这篇文章中你能看到：

• BizChart 中国地图在 Pro 中是如何使用的（常见的饼图、柱状图等，文档中已经有了比较规范的使用方式）
• 笔者踩过的一些小坑
• BizChart 常用组件的基本使用

---

笔者最近的一个业务是在Pro中做一个DashBord，选什么UI自定义，因为我是从来没有研究过前端可视化的。。。

But，领导一副我看好你小伙子的表情，即使再慌我表面也依旧稳如老狗，好了，废话不多说，笔者研究了一下complete版本的Pro，发现Pro已经集成了BizCharts，于是就开始了这两天的踩坑之旅。

注意，由于现在的Pro V4,使用的是 BizCharts3 而非 BizCharts4，因此笔者在这里讲的图表，也都是BizCharts3版本的。

一、背景介绍

---

（1）什么是 BizCharts
Bizcharts是一款基 于antv 的 G2 进行 react 封装的组件，是以数据为驱动的可视化图表。

（2）优势/特点

• （在市面上跟其他类似库相比）跟 react 组件写法结合的最好（G2和L7都需要挂载到一个根节点上，在Pro中很难使用）
• 是 ant design pro 推荐使用的第三方图表库，且 ant design pro 还原生提供了在 BizCharts
  基础上二次封装的简化版图表
• 支持 Canvas （google Map就是canvas写的）及 SVG 两种模式的图表渲染
• 兼容性，支持 Chrome，Safari，IE11+ 浏览器

以下对比一下G2和Bizcharts饼图代码的书写

G2

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

const data = [
  { type: '一线城市', value: 0.19 },
  { type: '二线城市', value: 0.21 },
  { type: '三线城市', value: 0.27 },
  { type: '四线及以下', value: 0.33 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(data);

chart.coordinate('theta', {
  radius: 0.75
});
chart.tooltip({
  showMarkers: false
});

const interval = chart
  .interval()
  .adjust('stack')
  .position('value')
  .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
  .style({ opacity: 0.4 })
  .state({
    active: {
      style: (element) => {
        const shape = element.shape;
        return {
          matrix: Util.zoom(shape, 1.1),
        }
      }
    }
  })
  .label('type', (val) => {
    const opacity = val === '四线及以下' ? 1 : 0.5;
    return {
      offset: -30,
      style: {
        opacity,
        fill: 'white',
        fontSize: 12,
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)',
      },
      content: (obj) => {
        return obj.type + '\n' + obj.value + '%';
      },
    };
  });

chart.interaction('element-single-selected');

chart.render();

BizCharts

import React from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Legend } from 'bizcharts@3.5.8';

class Demo extends React.Component {
  render() {
    const data = [
      { item: '事例一', count: 40, percent: 0.4 },
      { item: '事例二', count: 21, percent: 0.21 },
      { item: '事例三', count: 17, percent: 0.17 },
      { item: '事例四', count: 13, percent: 0.13 },
      { item: '事例五', count: 9, percent: 0.09 },
    ];

    const cols = {
      percent: {
        formatter: val => (val = `${val * 100}%`),
      },
    };

    return (
      <div>
        <Chart
          width={600}
          height={window.innerHeight}
          data={data}
          scale={cols}
          padding="auto"
          forceFit
          onGetG2Instance={(chart) => {
            // 饼图绘制多次会导致setSelected处理不生效，延时hack一下fixed
            setTimeout(() => {
              // 设置默认选中
              const geom = chart.get('geoms')[0]; // 获取所有的图形
              console.log(geom);
              const items = geom.get('data'); // 获取图形对应的数据
              console.log(JSON.stringify(items));
              geom.setSelected(items[1]);
            }, 2000);
          }} // 设置选中
          onPlotClick={(ev) => {
            console.log(ev);
          }}
        >
          <Coord type="theta" radius={0.65} />
          <Axis name="percent" />
          <Legend position="right" offsetY={-window.innerHeight / 2 + 120} offsetX={-100} />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          />
          <Geom
            type="intervalStack"
            position="percent"
            color="item"
            tooltip={[
              'item*percent',
              (item, percent) => {
                percent = `${percent * 100}%`;
                return {
                  name: item,
                  value: percent,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          />
        </Chart>
      </div>
    );
  }
}

// CDN END
ReactDOM.render(<Demo />, mountNode)

可以比较明显的看到以下两点：

• G2需要挂在根节点上或者需要一个容器，而BizCharts则不需要
• BizCharts是对G2的API做了封装，具体功能相差不大，但是更加贴近React开发

（3）六大重要概念解析（参考G2官方文档：G2 基础概念概览）

1. 视图View
2. 坐标轴 Axis
3. 图例 Legend
4. 几何标记 Geometry
5. 提示信息 Tooltip
6. 图形标记 Annotation