g2plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，”g2plot”中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。

下面是一个简单的是用例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
    <div ref="chartRef"></div>
</template>

<script setup>
import { onMounted, ref, defineProps, toRefs } from 'vue';
import { Chart } from '@antv/g2';

const props = defineProps({ config: Object })
const { config } = toRefs(props)

const chartRef = ref();

const initChart = () => {
  const chart = new Chart({
    ...config.value,
    container: chartRef.value,
    autoFit: true,
    forceFit: true,
  })
  chart
    // .theme({ type: 'classicDark' })
    .title({
      title: `月${window.CONFIG.systemName}分析`,
      // subtitle: 'world',
    })
    .interval()
    .data({
      type: 'fetch',
      value: '/api/hdfs/read-csv?path=/output/hdfsJobByMonth/part-r-00000',
      format: 'csv',
      // 如果是csv文件，则自动判断数据类型
      autoType: true,
      transform: [
        // {
        //   type: 'log'
        // },
        {
          type: 'map',
          callback: (val) => { val['年月'] = val['时间'] + '月'; return val; },
        },
        {
          type: 'sortBy',
          fields: ['时间'], // 根据 sold 字段排序
        },
        // fold 这是生成一个key value 的map
        {
          type: 'fold',
          fields: window.CONFIG.dataHeader,
          key: window.CONFIG.chartX,
          value: window.CONFIG.chartY,
        },
      ],

    })
    .encode('x', '年月')
    .encode('y', window.CONFIG.chartY)
    // dodgeX 生成 series 通道值为 color 通道的值，根据 series 通道实现分组效果
    .transform({ type: 'dodgeX' })
    // 根据 window.CONFIG.chartX 颜色进行区分，如果不加，则显示全部数据颜色固定
    .encode('color', window.CONFIG.chartX)

    // .encode('shape', 'hv')

    // .scale('x', {
    //     range: [0, 1],
    // })
    // .scale('y', {
    //     nice: true,
    // })
    // .axis('x', { title: null, line: true, tick: true })
    // .axis('y', { 
    //   title: null, 
    //   line: true, 
    // })

    // chart.line()
    // // chart.line().encode('shape', 'smooth');

    // chart.point().encode('shape', 'point').tooltip(false);


  chart.render();
  return chart;
}

onMounted(() => {
  console.log(chartRef.value)
  initChart()
})

</script>

<style lang="scss" scoped>

</style>

其中需要注意的是： .encode(‘color’, window.CONFIG.chartX) 用来实现的是图例，图例的内容为 window.CONFIG.chartX ，其中color 可以进行变化

因为 prop 接受了主题的配置，所有的颜色都会根据主题的index.js进行变化

另外 fetch 通过拉取 hdfs 中算好的 csv 文件来获得值，里面的 transform 对值进行转换，其中 type fold 能生成一个 key value 的map