antV g2初试

第一次用这个图表，主要就是根据官网示例及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, //不显示刻度
        label: {
          // 文字样式
          style: {
            fill: "rgba(170, 174, 186, 1)",
          },
        },
      });
      chart.axis("value", {//“value”是和数据字段对应的
        line: null,
        tickLine: null, //不显示刻度
        label: {
          // 文字样式
          style: {
            fill: "rgba(170, 174, 186, 1)",
            fontSize: 28,
          },
        },
        grid: {//横向网格线配置
          line: {
            style: {
              stroke: "rgba(255, 255, 255, 0.2)", // 颜色
              lineDash: [3, 2], // 虚线
            },
          },
        },
      });
      chart.interaction("tooltip", { // 不显示鼠标悬浮框
        start: [{ trigger: "plot:click", action: "tooltip:hide" }],
      });
      chart.data(this.data);//数据
      chart
        .interval()
        .position("name*value")
        .style({
          fill: "l(90) 0:rgba(147, 204, 255, 1) 1:rgba(90, 157, 255, 1)",//柱状图渐变
          radius: [4, 4, 0, 0],//柱状图圆角
        })
        .label("name*value", (name, value) => {
          //柱状图上方显示数字
          return {
            style: {},
            content: () => {
              return value;
            },
          };
        });
      chart.render();
    },
  },
};
</script>

2、折线图实现一根实线一根虚线

data: [
 { month: "Jan", city: "Tokyo", temperature: 7 },
 { month: "Jan", city: "London", temperature: 3.9 },
 { month: "Feb", city: "Tokyo", temperature: 6.9 },
 { month: "Feb", city: "London", temperature: 4.2 }
]
const chart = new Chart({
  container: "line", // 指定图表容器 ID
  width: 600, // 指定图表宽度
  height: 300, // 指定图表高度
});
chart.data(this.data);
chart
  .line()
  .position("month*temperature")
  .shape("city", (val) => {//虚线
     if (val === "London") {
       return "dash";
     }
  });

3、面积图渐变

chart
  .area()
  .position("month*temperature")
  .color("city", (val) => {
     let colorAttr = "";
     colorAttr =
       val === "Tokyo"
         ? "l(90) 0:rgba(255,0,0,1) 1:rgba(255,0,0,0)"
         : "l(90) 0:rgba(0,255,0,1) 1:rgba(0,255,0,0)";
       return colorAttr;
   });

4、仪表盘圆角效果

chart.annotation().arc({
  top: false,
  start: [0, 1],
  end: [6, 1],
  style: {
    stroke: "#CBCBCB",
    lineWidth,
    lineDash: null,
    lineCap: "round",//  圆角
  },
});

5、折柱混合图，柱状图那侧需要限制坐标轴数值0-100，使用度量scale，第一个参数为字段名

chart.scale("value", {//value与数据对应
  min: 0,
  max: 100,
});

6、遇到问题

（1）饼图图例要展示的内容及样式比较多，没找到合适的方法更改图例，最后把图例隐藏了，用div写了静态的展示效果。

（2）折柱混合图：左侧数值对应的网格横线与右侧数值对应的线不是同一条，左右坐标轴文字对不齐。