vue2中使用AntV 以g2plot为实例

npm install @antv/g2plot

<template>
    <div id="app">
        <div id="container"></div>
    </div>
</template>

<script>
    import {
        Bar
    } from '@antv/g2plot';
    export default {
        name: 'App',
        data() {
            return {
                sj: [{
                        year: '1951 年',
                        value: 38
                    },
                    {
                        year: '1952 年',
                        value: 52
                    },
                    {
                        year: '1956 年',
                        value: 61
                    },
                    {
                        year: '1957 年',
                        value: 145
                    },
                    {
                        year: '1958 年',
                        value: 48
                    },
                    
                ]
            }
        },
        mounted() {
            const bar = new Bar('container', {
                data: this.sj,
                xField: 'value',
                yField: 'year',
                seriesField: 'year',
                legend: {
                    position: 'top-left',
                },
            });
            bar.render();
        }
    }
</script>

<style>
</style>

npm install @antv/g2 --save

import { Chart } from '@antv/g2';

<div id="container"></div>

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(data);
chart.scale('sales', {
  nice: true,
});
chart.tooltip({
  showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('year*sales');
chart.render();