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的使用大家还是自己去体验吧。这里能展示的内容只是九牛一毛