学习UI组件：AntV和Ant Design（Day：20）

任务：学习AntV

1、简要介绍：

参考链接： https://ant-design-charts.antgroup.com/ Ant Design Charts 是 [AntV] 的 React 版本，对 React 技术栈的同学更加友好，同一团队开发。

开箱即用：默认呈现高质量图表，将对开发体验及用户体验的研究沉淀入图表的默认配置项

易于配置：用户能够根据具体业务需要较为轻松的调整图表细节

体验良好：视觉和交互体验聚焦于如何能够展示和发现信息"这一图表本源的职能上

2、安装方式

// 推荐用法
npm install @ant-design/charts --save

3、练习

按照官网写了一个柱状图和一个折线图的内容柱状图：

//柱状图练习
import React from "react"
//导入组件包
import { Column } from "@ant-design/charts"
//定义这个柱状图
const DemoColumn = () => {
  //数据部分
  const data = [
    {
      type:'家具家电',
      sales:38,
    },
    {
      type: '粮油副食',
      sales: 52,
    },
    {
      type: '生鲜水果',
      sales: 61,
    },
    {
      type: '美容洗护',
      sales: 145,
    },
    {
      type: '母婴用品',
      sales: 48,
    },
    {
      type: '进口食品',
      sales: 48,
    },
    {
      type: '食品饮料',
      sales: 38,
    },
    {
      type: '家庭清洁',
      sales: 38,
    },
  ];
  const config = {
    //调用上面的数据
    data,
    //x和y轴的内容自适应
    xField:'type',
    yField:'sales',
    label:{
      position:'middle',
      style:{
        fill:'#FFFFFF',
        opactity:0.6
      },
    },
    xAxis:{
      label: {
        autoHide:true,
        autoRotate:false
      },
    },
    //给x轴和y轴设置别名
    meta: {
      type:{
        alias:'类别',
      },
      sales:{
        alias:'销售额',
      },
    },
  };
  return <Column {...config} />

};
export default DemoColumn;

效果：

折线图：

//2、基础折线图
import React,{useState,useEffect} from "react";
import { Line } from "@ant-design/charts";
import { json } from "react-router-dom";
const DemoLine = ()=> {
  const [data,setData] = useState([]);

  useEffect(()=> {
    asyncFetch();

  },[]);

  const asyncFetch = ()=> {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
    .then((response) => response.json())
    .then((json)=>setData(json))
    .catch((error)=>{
      console.log('fetch data failed',error);

    });
  };

  const config = {
    data,
    padding:'auto',
    xField:'Date',
    yField:'scales',
    xAxis:{
      tickCount: 5,
    },
  };
    return <Line {...config} />;

};
export default DemoLine;

效果：

4、Tooltip 联动

import React, { useState, useEffect } from 'react';
import {
    Line,
    Area,
    Column,
    // Plot,
    // PlotEvent,
} from '@ant-design/charts';
//创建一个空对象，存储图标是实例
const PlotMaps = {};
//用于存储先前 tooltip 的数据。
let PreTooltipData;

const DemoLine = () => {
    //使用状态钩子管理组件的状态。它将 data 状态初始化为空数组，并提供一个 setData 函数以更新这个状态。
    const [data, setData] = useState([]);

    //效果钩子，仅在组件挂载时运行一次，通过 asyncFetch 函数异步获取数据。
    useEffect(() => {
        asyncFetch();
    }, []);

    //总之，这里的asyncFetch就是来1、获取数据  2、解析数据 3、把数据给setDate
    const asyncFetch = () => {
        // // 从URL异步获取数据并更新 'data' 状态。
        fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/sp500.json')
            //使用 .then 处理 fetch 的返回结果，response 是包含响应信息的对象。
            //在这里，通过 response.json() 将响应的 JSON 数据解析为 JavaScript 对象。
            .then((response) => response.json())
        //继续使用.then 处理解析后的 JSON 数据，调用 setData 函数来更新组件的 data 状态。
        //这会触发组件的重新渲染，显示新的数据。
            .then((json) => setData(json))
            //错误异常处理
            .catch((error) => {
                console.log('fetch data failed', error);
            });
    };

    //显示TooTip的函数
    const showTooltip = (date) => {
        //使用Object.keys获取ProtMaps对象中所有的键，即图表的类型
        //然后使用 forEach 迭代每个键，执行相应的操作。
        Object.keys(PlotMaps).forEach((plot) => {
            //获取数据且存到charData的变量中
            const chartData = PlotMaps[plot].chart.getData();
            //使用 for 循环遍历图表的数据项
            //chartData?.length 确保了在数据存在的情况下进行循环。
            for (let i = 0; i < chartData?.length; i++) {
                if (chartData[i].date === date) {
                    const { x, y } = PlotMaps[plot].chart.getXY(chartData[i]);
                    PlotMaps[plot].chart.showTooltip({ x, y });
                    break;
                }
            }
        });
    };

    //接受两个参数 evt（鼠标事件对象）和 plot（图表实例）。
    const setTooltipPosition = (evt, plot) => {
        //从传入的鼠标事件对象 evt 中提取 gEvent 属性，该属性包含了全局坐标信息，将其分别赋值给 x 和 y 变量。
        const { x, y } = evt.gEvent;
        //使用当前图表实例的 .getTooltipItems() 方法，传入鼠标坐标信息，获取鼠标位置对应的数据项。
        const currentData = plot.chart.getTooltipItems({ x, y });
        //检查当前 Tooltip 数据项的日期是否与先前存储的 Tooltip 数据项的日期相同。
        if (currentData[0]?.data.date === PreTooltipData?.date) {
            return;
        }
        //更新先前存储的 Tooltip 数据项为当前鼠标位置对应的数据项。
        PreTooltipData = currentData[0]?.data;
        //调用 showTooltip 函数，传递先前存储的 Tooltip 数据项的日期。
        //这一步会在其他图表上显示与该日期相对应的 Tooltip。
        showTooltip(PreTooltipData?.date);
    };

    return (
        <div>
            <Line
                //组件宽度为父容器宽度的40%。
                style={{ width: '40%' }}
                //将组件的数据源设置为 data，方便从上面的url中获取数据
                data={data}
                xField='date'
                yField='price'
                height={200}
                //在组件渲染并准备好后执行的回调函数，这里用于 注册事件监听器。
                onReady={(plot) => {
                    //将图表实例 plot 存储在全局对象 PlotMaps 中，以便其他部分的代码能够访问和操作该图表实例。
                    PlotMaps.line = plot;
                    //注册鼠标移动事件监听器。当鼠标在图表上移动时，执行 setTooltipPosition 函数
                    //该函数负责设置 Tooltip 的位置。
                    plot.on('mousemove', (evt) => {
                        setTooltipPosition(evt, plot);
                    });
                }}
            />
            <Area
            //下面部分参考上面的内容
                style={{ width: '60%' }}
                data={data}
                xField='date'
                yField='price'
                height={200}
                onReady={(plot) => {
                    PlotMaps.area = plot;
                    plot.on('mousemove', (evt) => {
                        setTooltipPosition(evt, plot);
                    });
                }}
            />
            <Column
                data={data}
                xField='date'
                yField='price'
                height={200}
                onReady={(plot) => {
                    PlotMaps.Column = plot;
                    plot.on('mousemove', (evt) => {
                        setTooltipPosition(evt, plot);
                    });
                }}
            />
        </div>
    );
};
export default DemoLine;

效果：

这个部分比较难懂，我只是先把前面的使用部分弄清楚了，这部分以后遇见再去实现联动。

5、学习Ant Design

注意这里学习有好几个版本，不要做成mobile端了

参考链接： https://ant.design/docs/react/use-with-create-react-app-cn

//安装方式：
 npm install antd --save

今天就进行到这里

明日任务：Ant Design和前端的实习任务一结合起来，争取做掉把UI的部分完成，因为我js的逻辑部分自己还有欠缺

XJQ124 / Some-notes