antv g2 使用点总结

• 折线图中的线使用渐变色

chart.line()
.position('month*value')
.shape('smooth')  //圆滑曲线,默认是折线
.color("l(90) 0:#ff0000 0.5:#7ec2f3 1:#ff0000")  //颜色设置，采用渐变的实现

• 任务列表中 选择任务后使用该任务对应的颜色显示折线

所有颜色存到数组allColorList中，

选择任务后通过index取值存下对应的颜色到数组中[color1, color2]

chart.value
    .line()
    .position('month*value')
    .color('itemName', colorList)

• 数据都为0 或者 没有数据时 显示纵坐标轴

首先判断纵坐标值都为0，

const cloneData = Object.assign([], data);
let isAllZero = false;
const sortData = cloneData.sort((a: any, b: any) => b.value - a.value),
      sortDataLen = sortData.length;
if (sortDataLen > 1 && sortData[sortDataLen - 1]['value'] === sortData[0]['value']) {
    if (sortData[0]['value'] > 0) isAllZero = false;
    else isAllZero = true;
}
else if (!sortDataLen) isAllZero = true;


chart.value.scale({
    month: {
      range: [0, 1],
    },
    value: {
      nice: true,
      min: 0,
      max: isAllZero ? 1 : null, // 设置为0时候，最大值为1 
    },
});

• 更改tooltip展示形式

chart.value.tooltip({
    showTitle: false,
    showMarkers: false,
    itemTpl:
      `<ul class="g2-tooltip-list">
      <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-title">{title}</span>
      </li>
      <li class="g2-tooltip-list-item">
        <span class="g2-tooltip-marker"></span>
        <span class="g2-tooltip-name">${
          itemVal.label
        }</span>:<span class="g2-tooltip-value">${
      hasPercent
        ? (+itemVal.value).toFixed(2) + "%"
        : (+itemVal.value).toFixed(2)
    }`,
  });

设置g2-tooltip-list g2-tooltip-title g2-tooltip-marker g2-tooltip-name g2-tooltip-value

也可以通过customItems更改相关数据，如对value进行处理显示 如下在processTooltipItems中实现

const processTooltipItems = (items) => {
    items.reduce((pre,next) => {
      next.value = next.value + '&&&999'
      pre.push(next)
      return pre
    },[])
    return items
  }
  
 chart.tooltip({
    shared: false, // 多用于柱状图，不启用会出现数据间有小段空白位置不显示tooltip
    showTitle: false,//不显示标题
    showMarkers: false,//不显示贴敷上去的小点
    position: 'right',//显示位置
    crosshairs: {
        type: 'x',
    },
    itemTpl: itemTpl,
    customItems: (items) => {
       return processTooltipItems(items);
    },
  })