vue中使用ants g2简单应用

柔光的暖阳◎ 2022-11-16 10:54 237阅读 0赞

详细内容请查看：[官方文档][Link 1]

**目录**

简单使用

封装line组件

使用组件

关于兼容性

--------------------

### 简单使用 ###

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

[详细配置官方文档][Link 2]

### 封装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   [参考文章][Link 3]

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

2，第三方代码兼容ie

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

使用版本：webpack --- 4.12.1 、

在vue.config.js中配置：

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

不足之处，欢迎指正。

[Link 1]: https://antv-g2.gitee.io/zh/docs/manual/about-g2
[Link 2]: https://www.bookstack.cn/read/g2-4.x/d1fcd9de29fdca87.md
[Link 3]: https://segmentfault.com/a/1190000017457575?utm_source=tag-newest
[Link 4]: https://www.dazhuanlan.com/2020/01/09/5e16d3b5eecb0/