Antv/G2

数据可视化的核心：数据到图形的映射

1. 特点和概述

1.1 特点

• 快速开发
• 封装复用组件
• 趣味性

1.2 概述

用面向对象的语法来描述数据可视化

2. 使用G2实现chart图表

• 数据处理
• 可视化语法描述
• 渲染

2.1 数据处理

// 定义数据
const data = [XXX]
// 绑定数据
chart.data(data)

2.2 可视化语法描述

• Geometry g2.antv.vision/zh/docs/api… 【interval/point/line】
• Mapping 【数据匹配】【position/size/shape/color】
• Details 【配置细节】【label/legend/tooltip】

2.3 渲染

chart.render();

// 整体代码
import  {Chart} from '@antv/g2'

export default defineComponent({
 name: 'Xx',
 components: {},
 props: {},
 setup () {

  // this
  const { proxy } = getCurrentInstance()

  // 定义数据
  const data = [
    {
      name: 'kity',
      height: 186,
      weight: 68,
      id: 1
    },
    {
      name: 'moky',
      height: 168,
      weight: 55,
      id: 2
    },
    {
      name: 'siriy',
      height: 188,
      weight: 70,
      id: 3
    },
    {
      name: 'anmi',
      height: 178,
      weight: 62,
      id: 4
    },
    {
      name: 'boolr',
      height: 160,
      weight: 50,
      id: 4
    },
  ]

  console.log('data', data)
  
  proxy.$nextTick(
    () => {
      // 创建 Chart 图表对象
      const myChart = new Chart({
        container: 'container',
        width: 600,
        height: 400,
        theme: 'customTheme',
        renderer: 'svg'
      })
      
      // 绑定数据
      myChart.data(data)
      
      // 定义数据的类型和展示方式
      myChart.scale({
        height: {
          // 线性，数据格式是number
          type: 'linear'
        },
        weight: {
          type: 'linear'
        },
        id: {
          type: 'linear'
        },
      })
      
      // 折线图
      // myChart.line()
      //   .position('name*height')

      // 矩形图
      // myChart.interval()
      //   .position('name*height')
      //   .color('id', val => {
      //     return val === 1 ? 'hotpink' : 'skyblue'
      //   })
      //   .size('weight')

      // 面积图
      // myChart.area()
      //   .position('name*height')

      // 极坐标
      // myChart.coordinate('polar')


      myChart.interval()
        // 根据身高字段，显示不同的颜色 
        .color('height')
        .position('name*weight')
      
      // 更新图表
      myChart.render()

    }
  )

  return {
    data
  }
  
 }
})