vue中使用ants g2简单应用

详细内容请查看：官方文档

目录

简单使用

封装line组件

使用组件

关于兼容性

---

 

简单使用

// 安装
npm install @antv/g2 --save
// 在组件中引入
import { Chart } from '@antv/g2'
// 使用
chart = new Chart({
   container: 'canvasId',
   width : '300',
   height : '400'
});

详细配置官方文档

封装line组件

<template>
  <div>
    <div :id="id"></div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  name: 'ChartLine',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    id: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    },
    legend: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    isShow(newValue, oldValue){
      console.log('watch isShow', newValue)
      if (newValue) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      console.log('init', this.value.data)
      this.chart && this.chart.destroy();

      this.chart = new Chart({
        container: this.value.id,
        width : this.value.width,
        height : this.value.height
      });
      this.chart.data(this.value.data);
      // 设置度量
      this.chart.scale({
        value: {
          min: 0,
          nice: true,
        },
      });
      // 设置提示
      this.chart.tooltip({
        showCrosshairs: true,// 显示辅助线
        shared: true,// 显示当前数据块背景
      });
      this.chart
        .line()
        .position('year*value')
        .color(this.color); // 内容为 颜色或者 键名

      // 显示图例
      this.chart.legend(this.legend, {
        position: 'right-top',
        offsetX: 8,
        offsetY: 8
      });
      // 设置交互
      this.chart.interaction('legend-filter');
      // 绘制
      this.chart.render();
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

使用组件

<template>
  <div>
    <chart-line :value="lockUseState2Data" :is-show="isShowLockState2Chart" :id="lockUseState2Data.id" :legend="'type'" :color="'type'" />
  </div>
</template>
<script>
import ChartLine from '@/components/Chart/Line'
export default {
  name: 'Index',
  components: {
    ChartLine
  },
  data() {
    return {
      isShowLockChart: false,
      lockUseState2Data: {
        width: 1100,
        height: 330,
        id: 'lockUseState2',
        data: []
      },
    }
  },
  mounted() {
    this.lockUseState2Data.data = [
      { year: '1991', value: 3, type: '1' },
      { year: '1992', value: 4, type: '1' },
      { year: '1993', value: 3.5, type: '1' },
      { year: '1994', value: 5, type: '1' },
      { year: '1991', value: 4, type: '2' },
      { year: '1992', value: 5, type: '2' },
      { year: '1993', value: 4.5, type: '2' },
      { year: '1994', value: 6, type: '2' },
    ]
    this.isShowLockChart = true
  }
}
</script>

关于兼容性

1，代码部分兼容

vue兼容ie，我使用的是@babel/polyfill   参考文章

// 安装
npm install --save @babel/polyfill
// main.js 中引入，在引入vue后立即引用
import '@babel/polyfill'
// 在babel.config.js中配置如下
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

2，第三方代码兼容ie

可查询vue兼容第三方插件相关内容。参考文章

使用版本：webpack --- 4.12.1 、

在vue.config.js中配置：

module.exports = {
  transpileDependencies: [
    /[/\\]node_modules[/\\]@antv[/\\]/,
  ],
}

不足之处，欢迎指正。