G2图使用-创建简单的柱状图

最新推荐文章于 2025-02-18 15:29:13 发布

Reisen7

最新推荐文章于 2025-02-18 15:29:13 发布

阅读量561

点赞数 5

文章标签：前端开发语言 g2 v2

本文链接：https://blog.youkuaiyun.com/qq_46150074/article/details/144720261

版权

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

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

<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>