vue3 tsx 项目中使用 Antv/G2 实现多线折线图

＊且听风吟

已于 2023-11-16 16:48:02 修改

阅读量1.5k

点赞数

分类专栏： # Typescript # Vue 3 文章标签：前端

于 2023-11-15 18:15:00 首次发布

本文链接：https://blog.csdn.net/hh18700418030/article/details/132103127

版权

本文介绍了如何在 Vue3 和 TypeScript 混写项目中集成 Antv/G2 库，通过 npm 安装依赖并详细讲解了如何在浏览器中引入 G2 的在线资源或本地脚本。接着展示了在项目中创建一个图表组件，引用公共方法，最终实现多线折线图的显示，并提供了数据源和页面效果。

摘要由CSDN通过智能技术生成

Antv/G2 文档
 Antv/G2 双折线图

安装 `antV-G2`

通过 npm 安装

项目中安装 antv/g2 依赖库：

npm install @antv/g2 --save

安装成功：
在这里插入图片描述

浏览器引入

可以将脚本下载到本地，也可以直接引入在线资源。

引入在线资源

<!-- 引入在线资源，选择需要的 g2 版本以替换 version 变量 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{
   {version}}/dist/g2.min.js"></script>
<!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->

引入本地脚本

<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

使用 script 标签引入 G2 资源时，挂载在 window 上的变量名为 G2。所以，实例中需要加上 G2 的前缀。如下：

const chart = new G2.Chart({
   
})

项目使用

新建文件 IndicatorTrend.tsx：

import {
    defineComponent, PropType, onMounted, ref } from 'vue'
import {
    useChartAutoResize } from '@/hooks/chart'
import styled from '@/styled-components'
import {
    Chart } from '@antv/g2';

export interface TrendListItem {
   
  date: string
  city: string
  tempvalue: number
}

interface Props {
   
  dataList?: TrendListItem[]
}

const Container = styled.div`  
  width: 100%;
  height: 100%;
`

const TitleBox = styled.h3`
  margin-bottom: 10px;
`

const ChartContainer = styled.div`
  height:100%;
`

export default defineComponent({
   
  props: {
   
    dataList: {
   
      type: Array as PropType<TrendListItem[]>,
      default: () => []
    }
  },
  setup() {
   
    const dataList = ref<TrendListItem[]>([])
    const canvasRef = ref<null | HTMLElement>(null)
    const chartRef = ref<null | InstanceType<typeof Chart>>(null)

    onMounted(() => {
   
      if (canvasRef.value) {
   
        const chart = new Chart({
   
          container: canvasRef.value,
          autoFit: true
        })

        chartRef.value = chart
      }

      refreshChartView()
    })

    useChartAutoResize(canvasRef, chartRef)

    function refreshChartView(){
         
      const chart: any = chartRef.value
      chart.clear()
      setTimeout(() => {
   
        chart.data(dataList.value)
        
        chart.scale({
   
          date: {
   
            range: [0, 1],
          },
          tempvalue: {
   
            nice: true,
          },
        });
        
        chart.tooltip({
   
          showCrosshairs: true,