[JavaScript知识库]如何在Vue3中放图表

首先在vue下

<template>
  <div ref="root" style="height:150px">
  
  </div>
</template>

在下面写script脚本语言

<script>
import { DualAxes } from '@antv/g2plot';//导包
import { ref, onMounted } from "vue"; //vue3的特殊导包
export default {
  setup(){
    let root = ref(null);
    let dualAxes = null;
    let initCharts = () => {
      //new一个对象
     dualAxes = new DualAxes(root.value, {
     //vue3下的函数、对象等书写格式
});
       //渲染
     dualAxes.render();
}
       //Mounted 和 onMounted 作用一样
    onMounted(initCharts);//vue3直接调用函数并挂载
    return {
      root,//指ref=""中的内容
    };
}
}
</script>

很多图表组件可以去搬过来，参考：AntV

AntV | 蚂蚁数据可视化