antv，图表和地图

前言

echarts是比较流行的图标和地图框架，文档清晰，灵活，满足各种自定义。众多的api接口，让使用者犹如大海捞针，每一个细节都需要通过api慢慢调整，耗费开发者大量的时间精力。

在这里补充一种新的图表地图框架，虽然做得不如echarts强大，适合快速开发节奏，让前端程序员在除了echarts以外还可以多一种选择。

antv

antv是蚂蚁金服团队打造的图表和地图框架（用过antd的同学应该知道这个团队）。

官方网站：https://antv.vision/zh/about

antv包含
G2（就是图表渲染，条形图，饼图，折线图等，里面有一些比较好看的图表设计，可以直接拿来用。）
G2地址 https://g2.antv.vision/zh/examples/gallery
G6 (思维导图，流程展示，树状图，)
G6地址 https://g6.antv.vision/zh/examples/tree/compactBox
F2 （针对移动端图表进行适配）
F2地址 https://f2.antv.vision/zh/examples/candlestick/basic
L7（地图，支持全球，全国（目前只支持中国），省，市，）
L7地址 https://l7.antv.vision/zh/examples/gallery
正如最开始所说，antv不如echarts全面，但参照了部分echarts的api借口，在使用过程能看到和echarts类似的api和相似的功能。

antv快速生成图表

antv的优势在于快速生成代码，配置图表的功能chartCub魔方（图表魔方，图表生成器）。

echarts自定义图表，是先写配置api才能看到生成图表的样式，而图表魔方为用户提供预览图表的功能，通过可视化界面，对图表进行样式配置并生成相应的代码。

图表魔方地址 https://chartcube.alipay.com/guide
这是未来前端发展的一种趋势，可视化配置，会慢慢代替许多代码的复制粘贴。虽然目前图表魔方只支持比较基础的图标配置，比较个性化的图表还是需要使用echarts。

笔者只用过G2和L7，其它内容暂不做展示，如果以后也有使用，会更新本篇博客。

G2使用

安装 @antv/g2plot
yarn add @antv/g2plot
npm i @antv/g2plot --save

以下代码都是通过配置后图表魔方自动生成的代码
//导入G2Plot 
import * as G2Plot from '@antv/g2plot';
//选择图表生成的dom节点，图表会生成到这个dom节点内。
//唯一需要注意的是，如果是vue或者react框架，进行这一步操作的时候，一定要确定这dom节点已经渲染成功，并且能够被找到。
const container = document.getElementById('app');
//需要渲染的数据，字段名和数据结构不可更改
const data = [
  {
    "series": "门店一",
    "x": "家具家电",
    "y": 185
  },
  {
    "series": "门店一",
    "x": "粮油副食",
    "y": 509
  },
  {
    "series": "门店一",
    "x": "美容洗护",
    "y": 901
  },
  {
    "series": "门店一",
    "x": "母婴用品",
    "y": 645
  },
  {
    "series": "门店一",
    "x": "进口食品",
    "y": 98
  },
  {
    "series": "门店一",
    "x": "食品饮料",
    "y": 724
  },
  {
    "series": "门店一",
    "x": "家庭清洁",
    "y": 471
  },
  {
    "series": "门店二",
    "x": "家具家电",
    "y": 276
  },
  {
    "series": "门店二",
    "x": "粮油副食",
    "y": 186
  },
  {
    "series": "门店二",
    "x": "美容洗护",
    "y": 648
  },
  {
    "series": "门店二",
    "x": "母婴用品",
    "y": 484
  },
  {
    "series": "门店二",
    "x": "进口食品",
    "y": 21
  },
  {
    "series": "门店二",
    "x": "食品饮料",
    "y": 721
  },
  {
    "series": "门店二",
    "x": "家庭清洁",
    "y": 917
  }
];

/** 图表配置，代码由图表魔方自动生成,直接复制粘贴就好了 */ 
const config = {
  /** 标题 */ 
  title: {
    visible: true,
    text: '考试科目柱状图',
  },
  /** 副标题 */ 
  description: {
    visible: true,
    text: '考试科目学生参加百分比',
  },
  legend: {
    flipPage: false,
  },
  xAxis: {
    title: {
      visible: false,
    },
  },
  yAxis: {
    title: {
      visible: false,
    },
  },
  /** 自使用父级的宽高 */ 
  forceFit: true,
  /** 也可以自定义图表的宽高 */ 
  // width: 570,
  // height: 360,
  xField: 'x',
  yField: 'y',
  stackField: 'series',
  /** 两种渲染颜色 */ 
  color: ['#e9e9e9', '#5b8ff9'],
};

/** 渲染实例 */
 const plot = new G2Plot.PercentStackedColumn(container, {
      data: chartsData,
      ...config,
    });
 plot.render();

如果是使用其它框架，就需要考验最基础的代码改造能力，echarts图表魔方，能够提供的是原生的js代码。

改造的完整react框架组件

import React, { useEffect, useState } from 'react';

import * as G2Plot from '@antv/g2plot';

/** 图标配置，代码由图表魔方自动生成 */ 
const config = {
  /** 标题 */ 
  title: {
    visible: true,
    text: '考试科目柱状图',
  },
  /** 副标题 */ 
  description: {
    visible: true,
    text: '考试科目学生参加百分比',
  },
  legend: {
    flipPage: false,
  },
  xAxis: {
    title: {
      visible: false,
    },
  },
  yAxis: {
    title: {
      visible: false,
    },
  },
  /** 自使用父级的宽高 */ 
  forceFit: true,
  /** 也可以自定义图表的宽高 */ 
  // width: 570,
  // height: 360,
  xField: 'x',
  yField: 'y',
  stackField: 'series',
  /** 两种渲染颜色 */ 
  color: ['#e9e9e9', '#5b8ff9'],
};

const PaperRadar: React.FC = () => {
  type ChartsDataType = {
    series: string;
    x: string;
    y: number;
  }[];

  /** 数据渲染 */
  const [chartsData, setChartsData] = useState<ChartsDataType>([] as ChartsDataType);

/** 渲染函数 */
  const chartsRender = () => {
    const container: HTMLElement = document.getElementById('exam-bar') as HTMLElement;

    const plot = new G2Plot.PercentStackedColumn(container, {
      data: chartsData,
      ...config,
    });
    plot.render();
  };

  useEffect(() => {
    setChartsData([
      {
        series: '门店一',
        x: '家具家电',
        y: 777,
      },
      {
        series: '门店一',
        x: '粮油副食',
        y: 934,
      },
      {
        series: '门店一',
        x: '美容洗护',
        y: 454,
      },
      {
        series: '门店一',
        x: '母婴用品',
        y: 999,
      },
      {
        series: '门店一',
        x: '进口食品',
        y: 98,
      },
      {
        series: '门店一',
        x: '食品饮料',
        y: 317,
      },
      {
        series: '门店一',
        x: '家庭清洁',
        y: 307,
      },
      {
        series: '门店二',
        x: '家具家电',
        y: 142,
      },
      {
        series: '门店二',
        x: '粮油副食',
        y: 199,
      },
      {
        series: '门店二',
        x: '美容洗护',
        y: 582,
      },
      {
        series: '门店二',
        x: '母婴用品',
        y: 64,
      },
      {
        series: '门店二',
        x: '进口食品',
        y: 89,
      },
      {
        series: '门店二',
        x: '食品饮料',
        y: 641,
      },
      {
        series: '门店二',
        x: '家庭清洁',
        y: 984,
      },
    ]);
    // chartsRender();
  }, []);

  useEffect(() => {
    if (chartsData.length) {
      chartsRender();
    }
  }, [chartsData]);

  return (
    <>
      <div id="exam-bar" style={{width:"100%"}}></div>
    </>
  );
};

export default PaperRadar;

L7地图的使用

根据antv的l7的安装教程，分别安装 @antv/l7 @antv/l7-district @antv/l7-maps

yarn add @antv/l7
yarn add @antv/l7-district
yarn add @antv/l7-maps
或
npm i @antv/l7 --save
npm i @antv/l7-district
npm i @antv/l7-maps

react代码

import React, { useEffect, useState } from 'react';

import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';

/** 地图配置 */

// 我选择的事全国地图，name和对应的code都是antv l7官方提供的，
// value字段及字段名是可以自定义的

const ProvinceData = [
  {
    name: '云南省',
    code: 530000,
    value: 0,
  },
  {
    name: '黑龙江省',
    code: 230000,
    value: 0,
  },
  {
    name: '贵州省',
    code: 520000,
    value: 0,
  },
  {
    name: '北京市',
    code: 110000,
    value: 0,
  },
  {
    name: '河北省',
    code: 130000,
    value: 0,
  },
  {
    name: '山西省',
    code: 140000,
    value: 0,
  },
  {
    name: '吉林省',
    code: 220000,
    value: 0,
  },
  {
    name: '宁夏回族自治区',
    code: 640000,
    value: 0,
  },
  {
    name: '辽宁省',
    code: 210000,
    value: 0,
  },
  {
    name: '海南省',
    code: 460000,
    value: 0,
  },
  {
    name: '内蒙古自治区',
    code: 150000,
    value: 0,
  },
  {
    name: '天津市',
    code: 120000,
    value: 0,
  },
  {
    name: '新疆维吾尔自治区',
    code: 650000,
    value: 0,
  },
  {
    name: '上海市',
    code: 310000,
    value: 0,
  },
  {
    name: '陕西省',
    code: 610000,
    value: 0,
  },
  {
    name: '甘肃省',
    code: 620000,
    value: 0,
  },
  {
    name: '安徽省',
    code: 340000,
    value: 0,
  },
  {
    name: '香港特别行政区',
    code: 810000,
    value: 0,
  },
  {
    name: '广东省',
    code: 440000,
    value: 0,
  },
  {
    name: '河南省',
    code: 410000,
    value: 0,
  },
  {
    name: '湖南省',
    code: 430000,
    value: 0,
  },
  {
    name: '江西省',
    code: 360000,
    value: 0,
  },
  {
    name: '四川省',
    code: 510000,
    value: 0,
  },
  {
    name: '广西壮族自治区',
    code: 450000,
    value: 0,
  },
  {
    name: '江苏省',
    code: 320000,
    value: 0,
  },
  {
    name: '澳门特别行政区',
    code: 820000,
    value: 0,
  },
  {
    name: '浙江省',
    code: 330000,
    value: 0,
  },
  {
    name: '山东省',
    code: 370000,
    value: 0,
  },
  {
    name: '青海省',
    code: 630000,
    value: 0,
  },
  {
    name: '重庆市',
    code: 500000,
    value: 0,
  },
  {
    name: '福建省',
    code: 350000,
    value: 0,
  },
  {
    name: '湖北省',
    code: 420000,
    value: 0,
  },
  {
    name: '西藏自治区',
    code: 540000,
    value: 0,
  },
  {
    name: '台湾省',
    code: 710000,
    value: 100,
  },
];

const StudentPostion: React.FC = () => {
 const draw = () => {
 	/** scene这个实例一定要在dom渲染完成之后创建 */
    const scene = new Scene({
    /** 传入需要渲染的dom节点的id */
      id: 'student-map',
      /** 渲染的地图会有一个antv的logo,可以让其消失 */
      logoVisible: false,
      map: new Mapbox({
        center: [116.2825, 39.9],
        pitch: 0,
        /** 其实这是一张世界地图，通过blank将除中国外的地方变为空白 */
        style: 'blank',
        zoom: 3,
        minZoom: 0,
        maxZoom: 10,
      }),
    });

    scene.on('loaded', () => {
      new CountryLayer(scene, {
      	/** 创建的数据，绑定到data字段进行渲染 */
        data: ProvinceData,
        joinBy: ['adcode', 'code'],
        depth: 1,
        /** 省界线颜色 */
        provinceStroke: '#fff',
        /** 省界线颜色宽度 */
        provinceStrokeWidth: 1,
        /** 市界线颜色 */

        cityStroke: '#EBCCB4',
        cityStrokeWidth: 1,
        /** 地图文字颜色 */
        label: {
        	/** 文字背景色 */
          stroke: 'rgba(0,0,0,0)',
          /** 文字颜色 */
          color: 'transparent',
        },
        fill: {
          color: {
       /** field 字段传入数据里面的具体值的字段名称 */
            field: 'value',
       /** 根据值的大小会渲染以下的颜色，值越大，会渲染数组靠后的颜色 */
            values: ['#BAE7FF', '#69C0FF', '#1890FF', '#0A73DA', '#004599'],
          },
        },
        /** 鼠标放上去的提示框内容渲染，相当于echarts的tooltip */
        popup: {
          enable: true,
          Html: (props: any) => {
            return `<span>${props.NAME_CHN}学生</span>:<span>${props.value}人</span>`;
          },
        },
      });
    });
  };

  useEffect(() => {
    draw();
  }, []);

  return (
    <>
      <div id="student-map" style={{ height: '400px', padding: '20px 0 0 30px', fontWeight: 600 }}>
        <div style={{ fontSize: '18px' }}>学生地理位置分布统计图</div>
      </div>
    </>
  );
};

效果图

antv的使用大家还是自己去体验吧。这里能展示的内容只是九牛一毛