欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中使用ants g2简单应用

程序员文章站 2022-04-21 21:39:38
...

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

目录

简单使用

封装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[/\\]/,
  ],
}

不足之处,欢迎指正。

 

相关标签: js vue.js