是在原有例子上添加了两行代码,测试过的
@font-face {
font-family: 'charts-icon'; /* project id 750097 */
}
var fontSize = 12 * (window.innerWidth / 375); // 字体适配不同屏幕
// 根据角度和圆心求坐标
function _getEndPoint(center, angle, r) {
return {
x: center.x + r * Math.cos(angle),
y: center.y + r * Math.sin(angle)
};
}
var _F = F2,
Shape = _F.Shape,
Util = _F.Util,
G = _F.G;
var Vector2 = G.Vector2;//二维向量
//自定义 Shape 的入口
/* const Shape = F2.Shape;
const shapeObj = Shape.registerShape('geomType', 'shapeName', {
getPoints(pointInfo) {
// 获取每种 shape 绘制的关键点
},
draw(cfg, container) {
// 自定义最终绘制的逻辑
return shape; // 返回最后绘制的 shape
}
}); */
/*
***geom 类型
***point:点的绘制很简单,只要获取它的坐标以及大小即可,其中的 size 属性代表的是点的半径。
***line:线其实是由无数个点组成,在 F2 中我们将参与绘制的各个数据转换成坐标上的点然后通过线将逐个点连接而成形成线图,其中的 size 属性代表的是线的粗细
***area:area 面其实是在 line 线的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充。
***interval:interval 默认的图形形状是矩形,而矩形实际是由四个点组成的,在 F2 中我们根据 pointInfo 中的 x、y、size 以及 y0 这四个值来计算出这四个点,然后顺时针连接而成。
*/
Shape.registerShape('interval', 'date', {//绘制名称为“pie-with-icon”的矩形
draw: function draw(cfg, container) {//自定义最终绘制的逻辑,该方法需要返回最后绘制的 shape。
//cfg: Object;该参数包含经过图形映射后的所有数据以及该数据对应的原始数据,
//原始数据存储于 cfg.origin._origin 中;
//通过 getPoints 计算出的图形关键点都储存于 points 中;
//cfg 对象中的 color、size、shape 都是通过映射之后的图形属性数据,可以直接使用
//container: F2.G.Group
//图形容器,需要将自定义的 shape 加入该容器中才能最终渲染出来。
var points = this.parsePoints(cfg.points);//图形的关键点
//mix(target, source1, source2 source3)
//描述:浅拷贝
//参数:target 拷贝的目标,source 拷贝对象,最多支持 3 个对象
//返回:拷贝结果
var style = Util.mix({
fill: cfg.color
}, cfg.style);
var coord = this._coord;//坐标系
if (cfg.isInCircle && coord.transposed) {//坐标在圆中,坐标系翻转
// 只处理极坐标y
var newPoints = [points[0], points[3], points[2], points[1]];
var _cfg$center = cfg.center,
x = _cfg$center.x,
y = _cfg$center.y;
//向量操作对象
var v = [1, 0];
var v0 = [newPoints[0].x - x, newPoints[0].y - y];
var v1 = [newPoints[1].x - x, newPoints[1].y - y];
var v2 = [newPoints[2].x - x, newPoints[2].y - y];
var startAngle = Vector2.angleTo(v, v1);//计算 v、v1 两项量的夹角。
var endAngle = Vector2.angleTo(v, v2);
var r0 = Vector2.length(v0);//计算向量的长度
var r = Vector2.length(v1);
if (startAngle >= 1.5 * Math.PI) {
startAngle = startAngle - 2 * Math.PI;
}
if (endAngle >= 1.5 * Math.PI) {
endAngle = endAngle - 2 * Math.PI;
}
//添加的两行代码
//计算当前角度所占百分比
var precentShow=(endAngle-startAngle)/(2*Math.PI);
var num=parseFloat((precentShow*100).toFixed(1))+"%";
var middleAngle = (startAngle + endAngle) / 2;
var numbricCenter = _getEndPoint(cfg.center, middleAngle, (r + r0) / 2);
var sector = container.addShape('Sector', {
className: 'interval',
attrs: Util.mix({
x: x,
y: y,
r: r,
r0: r0,
startAngle: startAngle,
endAngle: endAngle
}, style)
});
var sectorBBox = sector.getBBox();//获取当前 shape 的最小包围盒
if (sectorBBox.width >= fontSize && sectorBBox.height >= fontSize) {
// 确定扇形部分可以放下 iconfont
var text = container.addShape('text', {
//Sector 扇形
attrs: {
x: numbricCenter.x,//显示位置 x 坐标
y: numbricCenter.y,// 显示位置 y 坐标
fontFamily: 'charts-icon',// 字体
textAlign: 'center',
textBaseline: '24px',
fontSize: fontSize,
text: num,//十六进制解析字符串
fill: '#fff',//canvas 绘图属性
fontWeight: '400'
}
});
return [sector, text];
}
return sector;
}
}
});
var data = [{
name: '吊环',
percent: 30,
a: '1',
iconfont: 'e64b'
}, {
name: '拳击',
percent: 25,
a: '1',
iconfont: 'e650'
}, {
name: '跑步机',
percent: 15,
a: '1',
iconfont: 'e64f'
}, {
name: '跳绳',
percent: 15,
a: '1',
iconfont: 'e651'
}, {
name: '杠铃',
percent: 15,
a: '1',
iconfont: 'e64c'
}];
var map = {};
data.map(function(obj) {
map[obj.name] = obj.percent + '%';
});
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
percent: {
formatter: function formatter(val) {
return val + '%';
}
}
});
chart.tooltip(false);
chart.legend({
position: 'right',
marker: 'square',
itemFormatter: function itemFormatter(val) {
return val + ' ' + map[val];
}
});
chart.coord('polar', {
transposed: true,
innerRadius: 0.4,
radius: 0.85
});
chart.axis(false);
chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']).adjust('stack').shape('date');
chart.render();//渲染图表