Antdv pro admin踩坑

情景再现：本着抄代码的原则完成一个展现点击量，下载量数据的面积图，看系统自带antv就没想再次安装插件，从此一发不可收拾。系统自带的案例是这样写的，我这一看也不是面积图啊于是东拼西凑，官网文档也看看。

<script setup lang="ts">
import { Area } from "@antv/g2plot";

const props = defineProps({
  ChartData: [],
});
const container = ref();

onMounted(() => {
 
   new Area(container.value, {
    data: props.ChartData,
    autoFit: true,
    padding: "auto",
    xField: "dateTime",
    yField: "count",
    xAxis: {
      tickCount: 12,
    },
    isStack: false,
    
  }).render();

 
});
</script>

<template>
  <div ref="container" />
</template>

<style scoped lang="less"></style>

后面不断调试摸索修改成下面的代码

<script setup lang="ts">
import { Area } from "@antv/g2plot";

const props = defineProps({
  ChartData: [],
});
const container = ref();
const data=ref([])
onMounted(() => {
  console.log(props.ChartData);
  const chart = new Area(container.value, {
    data: props.ChartData,
    autoFit: true,
    padding: "auto",
    xField: "dateTime",
    yField: "count",
    xAxis: {
      tickCount: 12,
    },
    isStack: false,
    seriesField: "type",
    legend: {
      items: [
        {
          value: "",
          name: "跳入下载量",
          marker: {
            symbol: "circle", 
            style: {
              fill: "#7630EA",
              // stroke: '#fff',
            },
          },
        },
        {
          value: "",
          name: "用户点击量",
          marker: {
            symbol: "circle",
            style: {
              fill: "#1677FF",
              // stroke: '#fff',
            },
          },
        },
      ],
    },
    color: ["#1677FF", "#7630EA"],
   
    areaStyle: (e) => {
     
      if (e.type == "用户点击量") {
        return {
          fill: "l(270) 0:#1677FF  0.4:#1677FF 1:#1677FF",
          fillOpacity: 0.5, // 透明度
        };
      } else {
        return {
          fill: "l(270) 0:#7630EA  0.4:#7630EA  1:#7630EA ",
          fillOpacity: 0.5,
        };
      }
    },
  });
  chart.render();
 
});
</script>

<template>
  <div ref="container" />
</template>

<style scoped lang="less"></style>

后面为了实现父组件传值给这个图表组件并实现选择响应式渲染费劲了心思，因为数据改变了子组件获取不到，要么就是获取到了图不更新。最终通过子组件监听数据变化，变化之后重新渲染。 咱么想着重新渲染那就这样吧

 watch(
    () => props.ChartData,
    (newData, oldData) => {
      
      chart.render()
    }
  );

哎嗨你别说你还真别说，他就是不渲染啊。最后您猜怎么着，人家有个自己的写法，下面是封装的文件代码，还是我不小心点进去的发现了changeData

 update(options: Partial<O>): void;
    /**
     * 更新配置
     * @param options
     */
    protected updateOption(options: Partial<O>): void;
    /**
     * 设置状态
     * @param type 状态类型，支持 'active' | 'inactive' | 'selected' 三种
     * @param conditions 条件，支持数组
     * @param status 是否激活，默认 true
     */
    setState(type: StateName, condition: StateCondition, status?: boolean): void;
    /**
     * 获取状态
     */
    getStates(): StateObject[];
    /**
     * 更新数据
     * @override
     * @param options
     */
    changeData(data: any): void;
    /**
     * 修改画布大小
     * @param width
     * @param height
     */
    changeSize(width: number, height: number): void;

替换一下监听方法

watch(
    () => props.ChartData,
    (newData, oldData) => {
     
      chart.changeData(newData)
    }
  );

最终就能实现父组件传值给子图表组件并实现异步数据请求改变图表响应功能。狠狠抽自己的脸，叫你不看人家的封装的文件。