vue+阿里的G2图表-antv+折线图

前言：

       之前使用的图表是echarts+highcharts两个常用图表的，现在的话因为项目需要和别的原因也接触使用了阿里的g2图表，感觉效果还是挺好的，在这里分享下

官网入口

实现效果：

实现步骤：

第一：安装插件

npm install @antv/g2 --save

第二：lineCharts.vue，注意，图表这类型的数据必须mouned赋值一次，watch监听到数据改变在赋值一次，因为这里绑定的数据传过来后并不会同时加载图表

<template>
  <div class="gcharts" :id="id"></div>
</template>

<script>
import G2 from '@antv/g2'
export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    charData: {
      type: Array,
      default: function () {
        return {
          data: []
        }
      }
    },
    id: String
  },
  // 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watch
  mounted () {
    this.drawChart()
  },
  // 监听API接口传过来的数据 使用watch
  // watch: {
      // charData: function (val, oldVal) {    // 监听charData，当发生变化时，触发这个回调函数绘制图表
      // console.log('new: %s, old: %s', val, oldVal);
      // this.drawChart(val);
    // }
  methods: {
    drawChart() {
      // 2019.03.30 更新 destory方法已被废弃
      // this.chart && this.chart.destory()
      this.chart = new G2.Chart({
        container: this.id,
        width: 1550,
        height: 425
      })
      this.chart.source(this.charData)
      this.chart.scale('value', {
        min: 0
      })
      this.chart.scale('year', {
        range: [0, 1]
      })
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      })
      this.chart.line().position('year*value')
      this.chart.point().position('year*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      })
      this.chart.render()
    }
  }
}
</script>
<style lang='less' scope>
  .gcharts{
    width:100%;
    height:100%;
  }
</style>

第三：调用部分

<lineCharts  :charData="lineData" :id="'chart1'"></lineCharts>

import lineCharts from '@/components/gcharts/lineCharts'//g2绘图
components: {
    lineCharts,
  },


data () {
    return {
        lineData:[
                {year: '10/20',
                  value: 30
                }, {
                  year: '10/21',
                  value: 40
                }, {
                  year: '10/22',
                  value: 30.5
                }, {
                  year: '10/23',
                  value: 50
                }, {
                  year: '10/24',
                  value: 40.9
                }, {
                  year: '10/25',
                  value: 60
                }, {
                  year: '10/26',
                  value: 70
                }, {
                  year: '10/27',
                  value: 90
                }, {
                  year: '10/28',
                  value: 63
                }]
      

}}