一、基础图:https://ant-design-charts.antgroup.com/ Ant Design Charts
1. 首先要下载@ant-design/charts,然后在页面中添加如下柱状图代码:
import React from 'react';
import { Column } from '@ant-design/charts'const DemoColumn: React.FC = () => {const data = [{type: '分类一',sales: 38},{type: '分类二',sales: 52},{type: '分类三',sales: 61},{type: '分类四',sales: 145}, {type: '分类五',sales: 48}, {type: '其他',sales: 38}]const config = {data,xField: 'type',yField: 'sales',label: {// 可手动配置 label 数据标签位置// position: 'middle',// 'top', 'bottom', 'middle',// 配置样式style: {fill: '#FFFFFF',opacity: 0.6}},xAxis: {label: {autoHide: true,autoRotate: false}},meta: {type: {alias: '类别'},sales: {alias: '销售额(万)'}}}return <>antdCharts<Column {...config} /></>;
}
export default DemoColumn;
效果如下:
2.然后实现下这个案例区间曲线面积图 在柱庄图的基础上替换相关配置,代码如下:
import React from 'react';
import { Area} from '@ant-design/charts'const DemoColumn: React.FC = () => {const config = {data: {type: 'fetch',value: 'https://assets.antv.antgroup.com/g2/range-spline-area.json',transform: [{type: 'map',callback: ([x, low, high, v2, v3]) => ({ x, low, high, v2, v3 }),},],},xField: 'x',yField: ['low', 'high'],shapeField: 'smooth',style: {fillOpacity: 0.5,fill: '#64b5f6',lineWidth: 1,},axis: {y: { title: false },},scale: {x: { type: 'linear', tickCount: 10 },},point: {yField: 'v2',shapeField: 'point',sizeField: 2,},line: {yField: 'v3',style: {stroke: '#FF6B3B',},},};return <>Area<Area {...config} /></>;
}
export default DemoColumn;
解决办法1:将https://assets.antv.antgroup.com/g2/range-spline-area.json在浏览器中打开就可以看到:
解决办法2:在示例代码中添加如下代码
控制台可见:右击 Copy object就复制了
二、高级图:蚂蚁数据可视化 - AntV G2,G6,F2,L7