Antv G2(bizCharts) 点线图实现

最新推荐文章于 2023-06-13 10:35:22 发布

原创

最新推荐文章于 2023-06-13 10:35:22 发布 · 2.5k 阅读

文章标签：

#antv G2 #react 图表

名字

点线图: 不知道怎么命名

效果图

在这里插入图片描述

思路

数据：初始化三条数据，中间的为显示数据
使用折线图，隐藏折线，隐藏显示数据之外的所有点
X轴：隐藏X轴坐标内容
Y轴：设置y轴内容，y轴标题
注释：添加注释，线条，描述内容

代码（下面有全的子组件代码）

// 1、导入Chart图表
import {
   
    Chart } from "@antv/g2";
// 2、初始化图表
useEffect(() => {
   
   
    (async () => {
   
   
        const chartBox = new Chart({
   
   
            container: 'c3',
            autoFit: true,
            width: width,
            height: height,
            title: true
        })
        await setChartBox(chartBox) // 设置图表 chart
        const newData = cloneDeep(cData) // 复制数据 useState引用数据用新的地址替换
        newData.splice(1,1, data) // props接收到的显示的那条数据内容
        await setData(() => newData) // 设置新数据
    })()
}, [])
// 3、图表渲染
const setChart = () => {
   
   
    const margin = 1 / 3 // 3为数据列表长度
    chart.clear()
    chart.data(cData);
    chart.scale({
   
   
        date: {
   
   
        	// 坐标轴起始位置修改  一般[0 , 1]
            range: [margin / 2, 1 - margin / 2],
        },
        num: {
   
   
        	// 起始位置不变 末尾位置留白 给标题挤出空间
            range: [0, 1 - margin / 2],
            min: 0, // 设置坐标轴最小值
            max: max,// 设置坐标轴最大值
            nice: true, // 不设置最大值最小值的时候 会根据数据内容自动变化
        },
    });

    chart.tooltip(false); // 关闭提示

    // 坐标轴 X
    chart.axis('date', {
   
   
        label: {
   
   
            // 返回空字符串 隐藏横坐标文字内容
            formatter: (text) => ""
        }
    })
    // 坐标轴 Y
    chart.axis('num', {
   
   
        title: {
   
   
            text: cTitle, // 标题内容
            autoRotate: false,
            position: "end",
            offset: -10,
            textStyle: {
   
   
                textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                fontSize: '12', // 文本大小
                fontWeight: 'bold', // 文本粗细
                textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
            },
        },
        label: {
   
   
            formatter: (text) => text
        }
    })
    // 隐藏折线
    chart.line().style({
   
   
        stroke: "transparent" // 设置透明颜色
    }).position('date*num');
    // 隐藏点
    chart
        .point()
        .size