[vue]vue接入AntV G2Plot

安装

npm install @antv/g2plot --save

配置

在main.js中 引入

import g2 from '@antv/g2plot'
Vue.prototype.$G2 = g2

使用

图表地址：https://g2plot.antv.vision/zh/examples/line/multiple#style-callback

<template>
  <div id="container"></div>
</template>
<script>
  import { Line } from '@antv/g2plot'

  export default {
    data() {
      return {
        data: [
          {
            date: '2018/8/1',
            type: 'download',
            value: 4623,
          },
          {
            date: '2018/8/1',
            type: 'register',
            value: 2208,
          },
          {
            date: '2018/8/1',
            type: 'bill',
            value: 182,
          },
          {
            date: '2018/8/2',
            type: 'download',
            value: 6145,
          },
          {
            date: '2018/8/2',
            type: 'register',
            value: 2016,
          },
          {
            date: '2018/8/2',
            type: 'bill',
            value: 257,
          },
          {
            date: '2018/8/3',
            type: 'download',
            value: 508,
          },
          {
            date: '2018/8/3',
            type: 'register',
            value: 2916,
          },
          {
            date: '2018/8/3',
            type: 'bill',
            value: 289,
          },
          {
            date: '2018/8/4',
            type: 'download',
            value: 6268,
          },
          {
            date: '2018/8/4',
            type: 'register',
            value: 4512,
          },
          {
            date: '2018/8/4',
            type: 'bill',
            value: 428,
          },
          {
            date: '2018/8/5',
            type: 'download',
            value: 6411,
          },
          {
            date: '2018/8/5',
            type: 'register',
            value: 8281,
          },
          {
            date: '2018/8/5',
            type: 'bill',
            value: 619,
          },
          {
            date: '2018/8/6',
            type: 'download',
            value: 1890,
          },
          {
            date: '2018/8/6',
            type: 'register',
            value: 2008,
          },
          {
            date: '2018/8/6',
            type: 'bill',
            value: 87,
          },
          {
            date: '2018/8/7',
            type: 'download',
            value: 4251,
          },
          {
            date: '2018/8/7',
            type: 'register',
            value: 1963,
          },
          {
            date: '2018/8/7',
            type: 'bill',
            value: 706,
          },
          {
            date: '2018/8/8',
            type: 'download',
            value: 2978,
          },
          {
            date: '2018/8/8',
            type: 'register',
            value: 2367,
          },
          {
            date: '2018/8/8',
            type: 'bill',
            value: 387,
          },
          {
            date: '2018/8/9',
            type: 'download',
            value: 3880,
          },
          {
            date: '2018/8/9',
            type: 'register',
            value: 2956,
          },
          {
            date: '2018/8/9',
            type: 'bill',
            value: 488,
          },
          {
            date: '2018/8/10',
            type: 'download',
            value: 3606,
          },
          {
            date: '2018/8/10',
            type: 'register',
            value: 678,
          },
          {
            date: '2018/8/10',
            type: 'bill',
            value: 507,
          },
          {
            date: '2018/8/11',
            type: 'download',
            value: 4311,
          },
          {
            date: '2018/8/11',
            type: 'register',
            value: 3188,
          },
          {
            date: '2018/8/11',
            type: 'bill',
            value: 548,
          },
          {
            date: '2018/8/12',
            type: 'download',
            value: 4116,
          },
          {
            date: '2018/8/12',
            type: 'register',
            value: 3491,
          },
          {
            date: '2018/8/12',
            type: 'bill',
            value: 456,
          },
          {
            date: '2018/8/13',
            type: 'download',
            value: 6419,
          },
          {
            date: '2018/8/13',
            type: 'register',
            value: 2852,
          },
          {
            date: '2018/8/13',
            type: 'bill',
            value: 689,
          },
          {
            date: '2018/8/14',
            type: 'download',
            value: 1643,
          },
          {
            date: '2018/8/14',
            type: 'register',
            value: 4788,
          },
          {
            date: '2018/8/14',
            type: 'bill',
            value: 280,
          },
          {
            date: '2018/8/15',
            type: 'download',
            value: 445,
          },
          {
            date: '2018/8/15',
            type: 'register',
            value: 4319,
          },
          {
            date: '2018/8/15',
            type: 'bill',
            value: 176,
          },
        ],
      }
    },
    mounted() {
      // var v = this
      // this.$nextTick(() => {
      //   v.drawChart()
      // })
      this.drawChart()
    },
    created() {},
    methods: {
      drawChart() {
        // Step 1: 创建 Chart 对象
        const line = new Line('container', {
          data: this.data,
          xField: 'date',
          yField: 'value',
          yAxis: {
            label: {
              // 数值格式化为千分位
              formatter: (v) =>
                `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            },
          },
          seriesField: 'type',
          color: ({ type }) => {
            return type === 'register'
              ? '#F4664A'
              : type === 'download'
              ? '#30BF78'
              : '#FAAD14'
          },
          lineStyle: ({ type }) => {
            if (type === 'register') {
              return {
                lineDash: [4, 4],
                opacity: 1,
              }
            }
            return {
              opacity: 0.5,
            }
          },
        })
        line.render()
      },
    },
  }
</script>