antv | G2Plot 数据可视化图表库-案例

Posted 2021-12-11 JackieDYH

G2Plot 开箱即用的图表库

 定义图表插件

ChartDiscount.vue

<template>
  <div id="ChartDiscount" ref="ChartDiscount"></div>
</template>

<script>
import { Line } from '@antv/g2plot'
export default {
  name: 'ChartDiscount',
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
    Height: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.initG2Plot()
  },
  methods: {
    initG2Plot() {
      const LinePlot = new Line(this.$refs.ChartDiscount, {
        //   const LinePlot = new Line('ChartDiscount', {
        data: this.value,
        height: this.Height,
        xField: 'year',
        yField: 'value',
        label: {},
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        tooltip: { showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: '#000',
              fill: 'red',
            },
          },
        },
        interactions: [{ type: 'marker-active' }],
      })

      LinePlot.render()
    },
  },
}
</script>

注意 

id = 'ChartDiscount';
ref = 'ChartDiscount'

const LinePlot = new Line(this.$refs.ChartDiscount, {})  // 页面复用使用ref
OR
const LinePlot = new Line('ChartDiscount', {}) // 页面复用会出问题 id重复

导出 

index.js 

// pro components
import Waterfall from '@/components/Charts/Waterfall';
import ChartDiscount from '@/components/Charts/ChartDiscount';
export {
    Waterfall,
    ChartDiscount,
}

 使用

antv.vue

<template>
  <page-header-wrapper content="数据图表">
    <a-row :gutter="20">
      <a-col :sm="24" :md="12" :xl="10">
        <a-card :bordered="false" hoverable title="排行榜">
          <ChartDiscount :value="ChartDiscountData" :Height="250" />
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="14">
        <a-card :bordered="false" hoverable title="每月收支情况">
          <ChartDiscount :value="ChartDiscountData2" :Height="250" />
          <!-- <Waterfall :value="WaterfallData" :Height="250"></Waterfall> -->
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
import { ChartDiscount, Waterfall } from '@/components'
export default {
  name: 'Antv',
  components: {
    ChartDiscount,
    Waterfall,
  },
  data() {
    return {
      loading: false,
      ChartDiscountData: [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ],
      ChartDiscountData2: [
        { year: '2000', value: 13 },
        { year: '2001', value: 14 },
        { year: '2002', value: 13.5 },
        { year: '2003', value: 15 },
        { year: '2004', value: 14.9 },
        { year: '2005', value: 16 },
        { year: '2006', value: 7 },
        { year: '2007', value: 19 },
        { year: '2008', value: 13 },
      ],
      WaterfallData: [
        { type: '日用品', money: 680 },
        { type: '伙食费', money: 900 },
        { type: '交通费', money: 430 },
        { type: '水电费', money: 360 },
        { type: '房租', money: 1200 },
        { type: '商场消费', money: 1000 },
        { type: '红包收入', money: -2000 },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
span {
  font-size: 20px;
  color: red;
}
</style>