antV g2初试

本文记录了初次使用antV g2进行图表开发的经历,包括创建柱状图、饼图、折柱混合图等。作者指出antV g2的文档不足,遇到问题时难以找到解决方案,相比echarts,其社区资源较少,对初学者不甚友好。文中列举了具体实现步骤,并提到了遇到的问题,如图例展示和坐标轴对齐等。
摘要由CSDN通过智能技术生成

第一次用这个图表,主要就是根据官网示例及API文档写的,主要做了一个柱状图、饼图、折柱混合图。总体感受:文档内容比较少,百度也很少能搜到关于antv图表的问题解决办法之类的,遇到问题也只能一遍一遍看文档,对初学者很不友好啊。相比之下echarts用的人比较多,百度搜索结果也很多,社区也能找到很多例子。

使用步骤:

1、官网示例先找一个类似效果的复制下来,根据需要修改,下面是一个简单的柱状图。

<template>
  <div id="bar"></div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data:[
        {
            name:'张三',
            value:10
        },
        {
            name:'李四',
            value:50
        },
        {
            name:'王五',
            value:20
        }
      ]
    };
  },
  methods: {
    drawChart() {
      const chart = new Chart({
        container: "bar", // 指定图表容器 ID
        autoFit: true,//图表自适应容器宽高
      });
      chart.axis("name", {
        line: null,
        tickLine: null, //不显示刻度
        l
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值