vue使用antv-G2

1、安装

npm install @antv/g2plot

2、页面中使用

• 首先引入

import {Chart} from '@antv/g2';

• 用div来放需要显示的图，id必须写

  <div id="liveVerifyModuleDom"></div>

• 在data中定义数据

  export default { 
      name: "test", 
      data() { 
          return { 
          // 现场验证-版本成功率 
          liveVerifyVersionData: [], 
          // 用于二次请求图会显示多个问题 
          liveVerifyVersionCharts: null, 
          } 
      } 
  }

• 调用接口获取数据

    // 获取搜索结果
      getSearchList() {
        this.$axios
            .get('/zentao/searchList', {
              params: {
                zentaosid: this.sessionID,
              }
            })
            .then(res => {
              if(res.status === 200){
               this.liveVerifyVersionData= JSON.parse(res.data.data).bugs
               // 调用绘制图的方法
              this.OpenLiveVerifyVersion()
              }
            }).catch(err => {
          console.log(err)
        })
      },

• 绘制图（可以通过antv官网选择图：所有图表 | G2）

•    // 绘制成功率图
      OpenLiveVerifyVersion(){
         //再次请求先销毁绘制的图
        this.liveVerifyVersionCharts && this.liveVerifyVersionCharts.destroy()
        const liveVerifyVersionChart = new Chart({
          // id必须与div中的一致（即liveVerifyVersionDom）
          container: 'liveVerifyVersionDom',
          autoFit: true,
          height: 400,
          padding:[20,0,30,40],
        })
        liveVerifyVersionChart.data(this.liveVerifyVersionData);
  
        liveVerifyVersionChart.tooltip({
          showMarkers: false,
        });
        liveVerifyVersionChart.interaction('element-active');
  
        liveVerifyVersionChart.legend(false);
        liveVerifyVersionChart
            .interval({
              background: {
                style: {
                  radius: 8,
                },
              },
            })
            .position('name*value')
            // .color('value', (val) => {
            //   if (val <= '0.6') {
            //     return '#ff4d4f';
            //   }
            //   return '#2194ff';
            // })
            .label('value', {
              content: (originData) => {
                const val = parseFloat(originData.value);
                if (val < 0.05) {
                  return (val * 100).toFixed(1) + '%';
                }
              },
              offset: 10,
            });
        liveVerifyVersionChart.scale('value', {
          nice: false,
          alias: '成功率',
          formatter: value => {
            return value*100 + '%'
          }
        });
        // 添加文本标注
        array.forEach((item) => {
          liveVerifyVersionChart
              .annotation()
              .text({
                position: [item.name, item.value],
                // content: item.name,
                style: {
                  textAlign: 'center',
                },
                offsetY: -30,
              })
              .text({
                position: [item.name, item.value],
                content: (item.value * 100).toFixed(0) + '%',
                style: {
                  textAlign: 'center',
                },
                offsetY: -12,
              });
        });
  
        liveVerifyVersionChart.render();
        this.liveVerifyVersionCharts = liveVerifyVersionChart
      },

• 最后在methods调用请求方法

methods：{
    this.getSearchList()
    
}