antv-g2&g2plot的使用

5,149 阅读3分钟

最经项目中有用到g2来绘制折线图,记录一下自己封装的组件和遇到的问题

  • G2Line组件代码:
<template>
  <div class="g2-line" :id="id">
    <h4>{{title}}</h4>
  </div>
</template>

<script>

import G2 from '@antv/g2'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    chartData: {
      type: Array,
      default: function () {
        return {
          data: [{ 'date': '2018-11', 'type': '当前占比', 'value': 25.1 },
            { 'date': '2018-12', 'type': '当前占比', 'value': 24.7 },
            { 'date': '2019-01', 'type': '当前占比', 'value': 23.79 },
            { 'date': '2019-02', 'type': '当前占比', 'value': 24.59 },
            { 'date': '2019-03', 'type': '当前占比', 'value': 23.89 },
            { 'date': '2019-04', 'type': '当前占比', 'value': 23.68 },
            { 'date': '2019-05', 'type': '当前占比', 'value': 23.59 },
            { 'date': '2019-06', 'type': '当前占比', 'value': 23.8 },
            { 'date': '2019-07', 'type': '当前占比', 'value': 21.36 },
            { 'date': '2019-08', 'type': '当前占比', 'value': 19.65 },
            { 'date': '2019-09', 'type': '当前占比', 'value': 18.89 },
            { 'date': '2019-01', 'type': '历史同期占比', 'value': 25.37 },
            { 'date': '2019-02', 'type': '历史同期占比', 'value': 26.68 },
            { 'date': '2019-03', 'type': '历史同期占比', 'value': 24.71 },
            { 'date': '2019-04', 'type': '历史同期占比', 'value': 25.83 },
            { 'date': '2019-05', 'type': '历史同期占比', 'value': 26.07 },
            { 'date': '2019-06', 'type': '历史同期占比', 'value': 27.21 },
            { 'date': '2019-07', 'type': '历史同期占比', 'value': 25.32 },
            { 'date': '2019-08', 'type': '历史同期占比', 'value': 24.98 },
            { 'date': '2019-09', 'type': '历史同期占比', 'value': 25.64 }]
        }
      }
    },
    title: {
      type: String,
      default: ''
    },
    unit: { // 单位
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    }
  },
  // 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watch
  mounted () {
    this.initChart()
  },
  computed: {
    ...mapGetters(['windowWidth'])
  },
  // 监听API接口传过来的数据
  watch: {
    chartData: function (val, oldVal) { // 监听chartData,当发生变化时,触发这个回调函数绘制图表
      this.drawChart()
    }
  },
  methods: {
    initChart () {
      this.chart = new G2.Chart({
        container: this.id,
        width: this.windowWidth < 1920 ? 530 : 600,
        height: 300,
        padding: [20, 80, 100, 50]
      })
      this.drawChart()
    },
    drawChart () {
      this.chart.source(this.chartData)
      this.chart.scale('value', {
        min: 0
      })
      this.chart.scale('date', {
        range: [0, 1]
      })
      this.chart.tooltip({ // 给显示添加单位
        crosshairs: {
          type: 'line'
        },
        itemTpl: '<li data-index={index}><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: {value}' + this.unit + '</li>'
      })
      this.chart.line().position('date*value').color('type').shape('smooth')
      this.chart.point().position('date*value').size(3).color('type').shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      })
      this.chart.legend({ // 设置个性图例 marker图表在下图中有介绍
        marker: 'hyphen'
      })

      this.chart.render()
    }
  }
}
</script>
<style lang="scss" scoped>
h4 {
  text-align: center;
}
</style>

marker图表

  • G2plot的使用
<!-- G2PlotLine组件 -->
<template>
  <div :id="id"></div>
</template>

<script>
import { Line } from '@antv/g2plot'
export default {
  props: {
    chartData: {
      type: Array,
      default: function () {
        return {
          data: [{ 'date': '2018-11', 'type': '当前占比', 'value': 25.1 },
            { 'date': '2018-12', 'type': '当前占比', 'value': 24.7 },
            { 'date': '2019-01', 'type': '当前占比', 'value': 23.79 },
            { 'date': '2019-02', 'type': '当前占比', 'value': 24.59 },
            { 'date': '2019-03', 'type': '当前占比', 'value': 23.89 },
            { 'date': '2019-04', 'type': '当前占比', 'value': 23.68 },
            { 'date': '2019-05', 'type': '当前占比', 'value': 23.59 },
            { 'date': '2019-06', 'type': '当前占比', 'value': 23.8 },
            { 'date': '2019-07', 'type': '当前占比', 'value': 21.36 },
            { 'date': '2019-08', 'type': '当前占比', 'value': 19.65 },
            { 'date': '2019-09', 'type': '当前占比', 'value': 18.89 },
            { 'date': '2019-01', 'type': '历史同期占比', 'value': 25.37 },
            { 'date': '2019-02', 'type': '历史同期占比', 'value': 26.68 },
            { 'date': '2019-03', 'type': '历史同期占比', 'value': 24.71 },
            { 'date': '2019-04', 'type': '历史同期占比', 'value': 25.83 },
            { 'date': '2019-05', 'type': '历史同期占比', 'value': 26.07 },
            { 'date': '2019-06', 'type': '历史同期占比', 'value': 27.21 },
            { 'date': '2019-07', 'type': '历史同期占比', 'value': 25.32 },
            { 'date': '2019-08', 'type': '历史同期占比', 'value': 24.98 },
            { 'date': '2019-09', 'type': '历史同期占比', 'value': 25.64 }]
        }
      }
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      chart: null
    }
  },
  // 监听API接口传过来的数据
  watch: {
    chartData: {
      handler (val, oldVal) { // 监听chartData,当发生变化时,触发这个回调函数绘制图表
        if (val.length) {
          if (this.chart) {
            this.chart.updateConfig({ data: val })
          } else {
            this.initChart()
          }
        }
      },
      immediate: true
    }
  },
  mounted () {

  },
  methods: {
    initChart () {
      this.chart = new Line(document.getElementById(this.id), {
        title: {
          visible: true,
          text: this.title
        },
        data: this.chartData,
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        width: 600,
        height: 300,
        smooth: true,
        padding: 'auto',
        legend: {
          position: 'bottom'
        },
        point: {
          visible: true,
          shape: 'circle',
          size: 3
        },
        grid: {
          visible: true
        },
        yAxis: { // 设置y坐标轴 和 单位
          min: 0,
          formatter: (v) => v + this.unit
        }
      })
      this.chart.render()
    }
  }
}
</script>

效果图: