antv/g2中的柱状图一些配置

g2图表有些api的属性不全，文档看着有些费劲，所以整理了一些项目中用到的柱状图的简单配置项

图标初始化

const chart = new Chart({
        container: this.rootRef.current, //图标容器使用react的createRef()指定
        autoFit: true, //图标的宽度自适应
        height: isYesNoLabel ? 500 : chartH,
      });
      chart.data(data);  //导入数据data:[{type:srting,value:number},{},{}]
      const labelWidth = (chart.width/data.length)
      //g2的x轴labe超长时自适应会有些问题，所以自己写了个判断x轴坐标label超长旋转方法
      const isRotateOrNot = data.some(item=>getPixLength(item.type)>labelWidth)
      //根据是否旋转label来设置图表的padding值，如果设为auto的话，xTitle会被挤出canvas画布，chart.padding设置可行，但是chart.height或者.width都不行
      chart.padding = isRotateOrNot ? [20, 50, 150, 100]: [30, 50, 50, 100]

柱体颜色、宽度

chart.legend(false);关闭图例
      const isSettingSizeInstance = chart
        .interval()  //设置柱状图
        .position('type*value') //指定展示的数据
        .color('value', color); //指定柱子颜色
      if (isYesNoLabel && !isCrowd) {
        isSettingSizeInstance.size(60);  //根据条件设置柱子宽度
      }
      // chart.interaction('element-active');//在鼠标hover时出发交互
      chart.interaction('active-region');  //鼠标交互方式，在柱子上方时触发交互
      chart.render();

X轴Y轴的Tittle以及刻度分布

      // Y轴的刻度标题配置
      chart.scale('value', {
        alias: valueTitle, // 定义y title
        ticks: ticksMap, // 设置Y轴的刻度值分布 根据需求formatter后的(10份)
      });
      chart.scale('type', {
        alias: typeTitle,   //定义x title
      })

X轴坐标相关配置

chart.axis('type', {
        tickLine: null, // 不显示刻度线
        title:{     //title:null 不显示title
          style: {
            fontSize: 14,
            fontFamily: 'Roboto-Bold',
            textAlign: 'center',
            fill: '#333', // 文本颜色
          },
          offset:isRotateOrNot	//xTitle的垂直方向偏移设置
          ?maxTypeLength>142
            ?130:maxTypeLength/1.2
            :40
        },
  
        label: {
          autoHide: false,   //关闭label默认的自动隐藏
          autoEllipsis: false, //关闭lable自动省略
          autoRotate:false, //关闭默认的label超长自动旋转 默认时右下45度旋转
          style: {
            fill: '#666',
            textBaseline:'top',  //自定义label旋转时要设置的否者会以文本中心旋转会与柱状图重叠
            textAlign:isRotateOrNot?'right':'center'  //不旋转与不旋转时的文本与柱子对齐方式
          },                
           rotate:isRotateOrNot?Math.PI * -0.25:null, //旋转角度以3.14表示360度 
          offset: 6,
          formatter:(val,index)=>{  //超长label时做的截断
            if(getPixLength(val)>142){
              let PixLength  = 0
              let index = val.split('').findIndex((item)=>{
                PixLength += getPixLength(item)
                return PixLength>142
              })
              return `${val.slice(0,index)}...`
            }else return val
          },
        },
        // X轴线设置
        line: {
          style: {
            stroke: '#ccc',
            width: 1
          }
        }
      });

文本标注信息

data.forEach((item) => {
        const instance = chart.annotation();
        if(false){ //可以通过条件判断来设置是否将数据显示在柱体中
          instance = instance.text({
            position: [item.type, item.value/2 ],  //value在柱子里上下居中
            content:maxValue>=10*10000
            ? !isYesNoLabel?`${(item.value/10000).toFixed(1)}万`:item.value
            :item.value,
            style: {
              // opacity: showNumInInterval ? 1 : 0, //是否在柱子中间显示数据  //定义instance前，用的css隐藏来达到目的
              textAlign: 'center',
              fontSize: 12,
              fill:'#fff',
              stroke:'transparent' //通过设置transparent来消除柱中展示数字的描边
              // fillOpacity:0.1
            },
            // offsetY:-20,
             // offsetX:10,
            // formatter:maxValue>=100*10000?(val)=>{
            //   return (val/10000).toFixed(1)
            // }:null
           
          });
        }; 
        instance.text({ // 百分比文本
          position: [item.type, item.value],
          content: `${(item.value / sum * 100).toFixed(2)}%`, 
          style: {
            textAlign: 'center',
            fontSize: isCrowd ? 10 : 14,
            // fill: '#666',
            linwHeight: 20
          },
          offsetY: -7,
        });
      });

 **顺便提一下g2没有设置图表的title的api ，可以通过char.annotation().text加定位来自己设置或者用外部div来做，g2plot和bizcharts都有**