图例配置

shape, color, size 这三个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例；
shape属性，会根据不同的 shape 类型生成图例；
color 属性，会赋予不同的图例项不同的颜色来区分图形；
size属性，在图例上显示图形的大小。

图例类型

G2 中图例分为连续图例和分类图例两种，由于这两种图例的结构不同，所以配置项也存在差异。

分类图例
在这里插入图片描述
连续图例

图例同坐标轴一样，其内容也是由 scale 度量控制的，而渲染的细节，则是由主题控制，G2 同样开放了 chart.legend() 接口供用户进行个性化配置。

隐藏图例、更改图例位置

chart.legend(false); // 关闭全部图例
chart.legend('x',false);//只隐藏x维度对应的图例//更改图例位置
chart.legend({position: 'right',
}); // 图例进行整体配置
//更改 x 维度对应的图例的显示位置
chart.legend('x',{
position:'bottom',
});

图形标注配置（annotation)

图表标注类型及语法

arc：辅助弧线，只在极坐标系下生效。常用于绘制仪表盘。

chart.annotation().arc({});

image：辅助图片，在图表上添加辅助图片。

chart.annotation().image({});

line：辅助直线。

chart.annotation().line({});

region：辅助框，框选一段图区，设置背景、边框等。

chart.annotation().region({});

regionFilter：区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。

chart.annotation().regionFilter({})

dataMarker：特殊数据点标注，多用于折线图和面积图。

chart.annotation().dataMarker({})

dataRegion：特殊数据区间标注，多用于折线图和面积图。

 chart.annotation().dataRegion({})

清空图形标注

//清空所有的图形标注，但不会清空配置，当用户再次调用 chart.render() 时，所有的 annotation 会重新绘制。
chart.annotation().clear();//清空所有图形标注，同时清空配置
chart.annotation().clear(true);

动态图形标注

G2 图形标注接受的位置信息的参数都是原始数据值，辅助标记一旦生成后就是固定了位置，如果数据是动态更新的那么这个过程需要频繁进行,辅助标记需要不断地删除重新创建，非常麻烦；基于这种场景 Annotation 提供了如下两种解决方案

使用 ‘min’, ‘median’, ‘max’ 关键字，代表原始值的最小值、平均值、最大值，例如： [0, ‘min’] 表示 x 轴上数值为 0，y 轴位置在数值的最小值上；
表示位置的数组可以换成回调函数，函数原型： function(xScale, yScales) {return [];}

玫瑰图代码片段

 const data=[];//floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数const time=Math.floor(new Date().getTime()/1000)*1000;for(let i=-19;i<=0;i++) {data.push({time:time+i*3*1000,//random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数value:Math.random()+0.25,});}// 查找最大值
function findMax() {let maxValue = 0;let maxObj = null;data.forEach((obj) => {if (obj.value > maxValue) {maxValue = obj.value;maxObj = obj;}});return maxObj;
}
const chart = new G2.Chart({// 创建图表container: 'c1',autoFit: false,width: 600,height: 450,
});
chart.data(data.concat([]));
chart.scale({time: {type: 'time',mask: 'HH:mm:ss',},value: {nice: true,},
});
chart.animate(false);
// chart.axis(false);//axis坐标样式配置
chart.legend(false); // 关闭全部图例
chart.coordinate('polar',{innerRadius:0.1,
})
chart.interval().position('time*value').color('value');chart.annotation().text({position() {const obj = findMax();return [obj.time, obj.value];},content: '最大值',
});chart.render();setInterval(function() {data.shift();data.push({time: new Date().getTime(),value: Math.random() + 0.25,});chart.changeData(data.concat([]));
}, 3000);

文本标签配置

语法：
geometry.label();

文本标签类型： 分为’base’、‘interval’、‘pie’、‘polar’，4种类型。

树图为例

    fetch('https:/g2.antv.vision/zh/examples/data/flare.json').then(res => res.json()).then(data => {const dv = new DataSet.View().source(data, {type: 'hierarchy'});dv.transform({type: 'hierarchy.tree'});const chart = new G2.Chart({container: 'container',autoFit: true,height: 500,padding: [50, 0, 20, 0]});chart.axis(false);chart.legend(false);chart.coordinate('polar');chart.scale({x: {nice: true,sync: true,},y: {nice: true,sync: true,},});const edgeView = chart.createView();edgeView.data(dv.getAllLinks().map(link => ({x: [link.source.x, link.target.x],y: [link.source.y, link.target.y],source: link.source.id,target: link.target.id})));edgeView.edge().position('x*y').shape('smooth') // vhv.color('grey').tooltip('source*target').style({strokeOpacity: 0.5,});const nodeView = chart.createView();nodeView.data(dv.getAllNodes().map(node => ({hasChildren: !!(node.data.children && node.data.children.length),name: node.data.name,value: node.value,depth: node.depth,x: node.x,y: node.y})));nodeView.point().position('x*y').color('hasChildren').label('name', {offset: 0,labelEmit: true,style: {fill: 'grey',fontSize: 9,}});chart.render();});