场景
官方花瓣图实例:
http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html
官方示例效果:
需要修改成的效果
需要将图形旁边的分类一等修改成具体业务相关 信息比如正极车间,加上需要显示的数量等。
实现
SpringBoot+AntV实现饼状图中的花瓣图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169
参照上面的引进AunV的过程。
找到设置图表的js代码中:
chart.intervalStack().position('value').color('type').shape('platelet')
.label('type', {
formatter: function formatter(value, type) {
return type.point.type + ': ' + type.point.value;
}
});
其中type是数据源中的属性,type.point.type就是获取数据源中的type属性,type.point.value就是获取数据源中的value属性。
数据源参照如下:
var data = [{
type: names1[0],
value:values1[0],
percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])
}, {
type: names1[1],
value:values1[1],
percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])
}, {
type: names1[2],
value:values1[2],
percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])
}, {
type: names1[3],
value:values1[3],
percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])
}
];