如何使用 antv 图表组件

效果图：

安装：

cnpm install --save @antv/g2

使用：

首先，在<template></template>中写入：

<div id="barG2"></div>

其次，在<script></script>中写入：

<script>
import G2 from '@antv/g2'

export default {
  name: 'antv',
  mounted () {
    let that = this
    // @antv/g2
    const data = [
      {
        'name': 'London',
        'month': 'Jan.',
        'number': 18.9
      }, {
        'name': 'London',
        'month': 'Feb.',
        'number': 28.8
      }, {
        'name': 'London',
        'month': 'Mar.',
        'number': 39.3
      }, {
        'name': 'London',
        'month': 'Apr.',
        'number': 81.4
      }, {
        'name': 'London',
        'month': 'May',
        'number': 47
      }, {
        'name': 'London',
        'month': 'Jun.',
        'number': 20.3
      }, {
        'name': 'London',
        'month': 'Jul.',
        'number': 24
      }, {
        'name': 'London',
        'month': 'Aug.',
        'number': 35.6
      }, {
        'name': 'Berlin',
        'month': 'Jan.',
        'number': 12.4
      }, {
        'name': 'Berlin',
        'month': 'Feb.',
        'number': 23.2
      }, {
        'name': 'Berlin',
        'month': 'Mar.',
        'number': 34.5
      }, {
        'name': 'Berlin',
        'month': 'Apr.',
        'number': 99.7
      }, {
        'name': 'Berlin',
        'month': 'May',
        'number': 52.6
      }, {
        'name': 'Berlin',
        'month': 'Jun.',
        'number': 35.5
      }, {
        'name': 'Berlin',
        'month': 'Jul.',
        'number': 37.4
      }, {
        'name': 'Berlin',
        'month': 'Aug.',
        'number': 42.4
      }
    ]
    const chart = new G2.Chart({
      container: 'barG2',
      width: 550,
      height: 350
    })
    chart.source(data, {
      month: {
        alias: '月份' // 定义别名
      },
      number: {
        alias: '月均降雨量'
      }
    })
    chart.axis('month', {
      grid: {
        align: 'center',
        type: 'line',
        lineStyle: {
          stroke: '#d9d9d9', // 网格线的颜色
          // lineWidth: 1, // 网格线的粗细
          lineDash: [ 4, 4 ] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
        },
        hideFirstLine: true, // 是否隐藏第一条网格线，默认为 false
        hideLastLine: true
      },
      title: {
        autoRotate: 'boolean', // 是否需要自动旋转，默认为 true
        offset: 30, // 数值，设置坐标轴标题距离坐标轴线的距离
        // 设置标题的文本样式
        textStyle: {
          textAlign: 'center', // 文本对齐方向，可取值为： start middle end
          fill: '#404040', // 文本的颜色
          fontSize: '12', // 文本大小
          // fontWeight: 'bold', // 文本粗细
          // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
          textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
        },
        position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
      }
    })
    chart.axis('number', {
      grid: {
        align: 'center',
        type: 'line',
        lineStyle: {
          stroke: '#d9d9d9', // 网格线的颜色
          // lineWidth: 1, // 网格线的粗细
          lineDash: [ 4, 4 ] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
        },
        hideFirstLine: true, // 是否隐藏第一条网格线，默认为 false
        hideLastLine: true
      },
      title: {
        autoRotate: 'boolean', // 是否需要自动旋转，默认为 true
        offset: 70, // 数值，设置坐标轴标题距离坐标轴线的距离
        // 设置标题的文本样式
        textStyle: {
          textAlign: 'center', // 文本对齐方向，可取值为： start middle end
          fill: '#404040', // 文本的颜色
          fontSize: '12', // 文本大小
          // fontWeight: 'bold', // 文本粗细
          // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
          textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
        },
        position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
      }
    })
    chart.interval().position('month*number').color('name').adjust([{
      type: 'dodge',
      marginRatio: 1 / 32
    }])
    chart.render()
  }
}
</script>

END