antvg2踩坑记录

官方地址https://antv.vision/

建议纯新手的话先看下教程，明白各个组件和一些可视化的基础概念更容易上手（戳这里跳转官方教程）

 

 

 柱状图改变柱子的颜色

 

 

.color('l(90) 0:rgb(47,209,255) 1:rgb(0,13,255)')
//渐变色

 

改变提示信息 Tooltip的样式

当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

这里没有加样式，需要什么样式可以直接通过class设置就好了（戳这里看官方 ToolTip 的更多操作 https://g2.antv.vision/zh/docs/manual/concepts/component/tooltip）

 

let div = `

  
Language
  

    

      
      a:70
    
    

      
      b:50
    
  
`
chart.tooltip({
  showCrosshairs: true, // 展示 Tooltip 辅助线
  shared: true,
  showTitle: false,
  itemTpl: div,
});

改变柱状图背景的颜色

chart.tooltip({
   crosshairs: {
    type:'rect',
    style:{
      fill:('l(90) 0:rgb(47,209,255) 1:rgb(0,13,255)'),
      fillOpacity:1
    }
  }// 展示 Tooltip 辅助线
});

改变倾斜的角度 x轴label重叠，改变label的倾斜角度

 

const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 500,
  padding: [ 20, 20, 'auto', 20 ]
});
chart.axis('type', {
  label: {
    textStyle: {
      fill: '#aaaaaa',
      rotate: 30  //label 的倾斜角度
    }
  }
});