AntDesignCharts折线图配置属性结合案例详细说明
最近接⼿了⼀个react项⽬，⾥⾯需要⽤到折线图，看到图表的感觉不难。但是仔细⼀看引⼊的是 Ant Design Charts。然后去看了⼀下⽂档，发现好多地⽅的属性与echart区别很⼤，甚⾄⽤法都不⼀样了。最终结合⽂档，对属性⼀ ⼀ 试⽤了解，完成了任务。现给与记录，以便后来再使⽤⽅便。
实现⽬标( UI 给图 )
现有折线图（ant 基础折线图）
提供数据格式如下：
1.⾸先安装包，导⼊引⽤直接看⽂档。传送门：
2.到基础的折现配置，直接放⼊代码。data数据需要⾃⼰提供。
3.最终config实现配置代码如下。注意：如果是ts就要在config后⾯加上类型为any
const config: any = {
height: 240,  // 画布⾼度
// padding：画布周围空⽩，如果字体过长过⼤，都要填充⼤⼀点，auto在苹果设备上可能会出现x轴坐标⽂字显⽰不完整
padding: [40, 0, 40, 60],
// data 数据源  xField的值取data中某个字段，表⽰x轴显⽰的⽂字。 yField同理 y轴的⽂字
data: data
xField: 'year',
yField: 'value',
// seriesField 这个是多条曲线的关键，如果数值有多种，就会出现多条曲线
seriesField: 'category',
// tooltip ⾃定义触摸到曲线后显⽰数据弹窗的样式，不配就显⽰默认的
tooltip: {
customContent: (title: any, items: any): any => (
<div style={{ padding: '12px 14px', fontSize: '12px', width: '180px', height: '68px' }}>
{items && items.length === 2 && (
<>
<p className={styles.firstTg}>
<p className={styles.firstTg}>
<span className={llowTip} />
<span className={styles.scoendTg}>充值</span>
{items[0] && items[0].data.amount}
</p>
<p className={styles.firstTg}>
<span className={Tip} />
<span className={styles.scoendTg}>消费</span>
{items[1] && items[1].data.amount}
</p>
</>
)}
{items
&& items.length < 2
&& ((items && items[0] && items[0].name === '充值总额' && (
<p className={styles.firstTg}>
<span className={llowTip} />
<span className={styles.scoendTg}>充值</span>
{items[0] && items[0].data.amount}
</p>
))
|| (items && items[0] && items[0].name === '消费总额' && (
<p className={styles.firstTg}>
<span className={Tip} />
<span className={styles.scoendTg}>消费</span>
{items[0] && items[0].data.amount}
</p>
)))}
</div>
),
svg canvas
},
// 设置y轴的样式
yAxis: {
line: { style: { stroke: '#0A122E' }}// 配上这条数据才会显⽰y轴 stroke等同css color        // label 配置y轴⽂字的样式
label: {
// formatter 对y轴⽂字进⼀步处理
formatter: (v: any) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
style: {
stroke: '#0A122E',
fontSize: 12,
fontWeight: 300,
fontFamily: 'Apercu',
},
},
// grid 配置⽔平线的样式下⾯配置为虚线如果要为实线，不⽤配置
grid: {
line: {
style: {
stroke: 'rgb(150,160,171)',
lineDash: [4, 5],
},
},
},
},
xAxis: {
line: { style: { stroke: '#0A122E' } },
label: {
style: {
stroke: '#0A122E',
fontSize: 12,
fontWeight: 300,
fontFamily: 'Apercu',
},
},
},
},
//renderer 画布渲染配置，canvas 或 svg
renderer: 'svg',
// 是否为平滑曲线
smooth: true,
// 配置显⽰的2条曲线线条颜⾊，如果多条，继续添加，注意与右上⾓的图例颜⾊要对应    color: ['#E09B27', '#38A636'],
// 配置显⽰图例，就是上⾯那个可以点击的曲线
legend: {
//  图例相对于画布的位置
position: 'top-right',
// 每个图例的样式
items: [
{
name: '充值总额',
marker: {
// 是否为⽅块
symbol: 'square',
style: {
// 填充颜⾊，注意要与线条颜⾊对应。
fill: '#E09B27',
},
},
},
{
name: '消费总额',
marker: {
symbol: 'square',
style: {
fill: '#38A636',
},
},
},
],
},
};
4。最终<Line {...config} />放⼊你想要放的位置。
<Line {...config} />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。