vue中使用ants g2简单应用

本文介绍了如何在Vue应用中使用AntV G2库创建Line组件,包括了简单的安装、配置步骤,以及如何根据需求定制图表的展示、交互和兼容性处理。通过实例演示了如何在组件中传递数据和配置参数,确保在不同浏览器环境下正常工作。
摘要由CSDN通过智能技术生成

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

目录

简单使用

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

不足之处,欢迎指正。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值