最近接手了一个react项目,里面需要用到折线图,看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档,发现好多地方的属性与echart区别很大,甚至用法都不一样了。最终结合文档,对属性一 一 试用了解,完成了任务。现给与记录,以便后来再使用方便。
实现目标( UI 给图 )
现有折线图(ant 基础折线图)
提供数据格式如下:
1.首先安装包,导入引用直接看文档。传送门:快速上手 | Ant Design Charts
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}>
<span className={styles.yellowTip} />
<span className={styles.scoendTg}>充值</span>
{items[0] && items[0].data.amount}
</p>
<p className={styles.firstTg}>
<span className={styles.greenTip} />
<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={styles.yellowTip} />
<span className={styles.scoendTg}>充值</span>
{items[0] && items[0].data.amount}
</p>
))
|| (items && items[0] && items[0].name === '消费总额' && (
<p className={styles.firstTg}>
<span className={styles.greenTip} />
<span className={styles.scoendTg}>消费</span>
{items[0] && items[0].data.amount}
</p>
)))}
</div>
),
},
// 设置y轴的样式
yAxis: {
min: 0,
max: 100, // min 和 max 设置Y轴最大值和最小值,然后自动分配
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} />