蚂蚁金服:https://g2.antv.vision/zh/examples/case/pie#pie6
鼠标放上去的效果
隐藏了自带的提示文字,其他表有个formatter字段可以格式化提示文字,但是这个试了不行,然后用了野蛮的方法,给隐藏了,哈哈哈!
/deep/ #DpTotal .g2-tooltip-list {
display: none;
}
完整的代码如下:
1,html的
<div id="DpTotal"></div>
2,js代码
initDpTotalChart0() {
this.DpTotalChart = new Chart({
container: 'DpTotal',
autoFit: true,
height: 375,
});
},
//门急诊处方点评统计
initDpTotalChart() {
this.DpTotal.DpTotalData = [
{
type: '门诊处方',
value: 0,
percent1: '门诊处方:' + '33444' + " ; " + (33444 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
},
{
name: '已点评门诊处方',
type: '门诊处方',
value: 22222,
percent1: '已点评门诊处方:' + '22222' + " ; " + (22222 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
}, {
name: '未点评门诊处方',
type: '门诊处方',
value: 11222,
percent1: '未点评门诊处方:' + '11222' + " ; " + (11222 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
},
{
type: '急诊处方',
value: 0,
percent1: '急诊处方:' + '77774' + " ; " + (77774 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
},
{
name: '已点评急诊处方',
type: '急诊处方',
value: 33332,
percent1: '已点评急诊处方:' + '33332' + " ; " + (33332 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
}, {
name: '未点评急诊处方',
type: '急诊处方',
value: 44442,
percent1: '未点评急诊处方:' + '44442' + " ; " + (44442 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
}, ]
const ds = new DataSet();
const dv = ds.createView();
dv.source(this.DpTotal.DpTotalData).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
const colorMap = {
门诊处方: '#5B8FF9',
急诊处方: '#F7A127',
};
const colorMap2 = {
已点评门诊处方: '#5CB0FA',
未点评门诊处方: '#6DDEED',
已点评急诊处方: '#F7B823',
未点评急诊处方: '#F7E623',
};
this.DpTotalChart.data(dv.rows);
this.DpTotalChart.legend(false); 配置图例有两种方式 // 关闭图例
this.DpTotalChart.coordinate('theta', { //配置坐标系 //theta:一种特殊的极坐标系,半径长度固定,仅仅将数据映射到角度,常用于饼图的绘制。
radius: 0.5, //用于极坐标,配置极坐标半径,0-1 范围的数值
innerRadius: 0.3, //用于极坐标,极坐标内半径,0 -1 范围的数值
});
let data2 = this.DpTotal.DpTotalData
this.DpTotalChart.tooltip({
// showTitle: false,
// showContent:false,
showMarkers: false, //是否渲染 tooltipMarkers。
title: 'percent1'
});
this.DpTotalChart
.interval()
.adjust('stack') //设置数据调整方式。stack(堆起来的意思)
.position('percent')
.color('type', (val) => colorMap[val])
.style({
stroke: 'white',
lineWidth: 1,
})
//里面圈的文字
.label('type*value', { //是将数据值映射到图形的文本上的方法
offset: -5, //相对数据点的偏移距离。
style: { //文本图形属性样式
fill: 'white',
shadowBlur: 2, //阴影模糊
shadowColor: 'rgba(0, 0, 0, .45)',
},
});
// 辅助文本
this.DpTotalChart
.annotation() //图形标注,Annotation,作为 G2 图表的辅助元素,主要用于在图表上标识额外的标记注解。
.text({ //辅助文本,指定位置添加文本说明。
position: ['50%', '50%'], //定位位置。
content: '处方总数', //显示的文本内容。
style: {
fontSize: 13,
fill: '#8c8c8c',
textAlign: 'center',
},
offsetY: -10,
}).text({
position: ['50%', '50%'],
content: this.DpTotal.MZBlTotal + '',
style: {
fontSize: 13,
fill: '#8c8c8c',
textAlign: 'center',
},
offsetY: 10,
})
const ds2 = new DataSet();
const dv2 = ds2.createView();
dv2.source(this.DpTotal.DpTotalData).transform({
type: 'percent',
field: 'value',
dimension: 'name',
as: 'percent',
});
const outterView = this.DpTotalChart.createView();
console.log(dv2.rows,"dv2.rows")
outterView.data(dv2.rows);
outterView.coordinate('theta', { 配置坐标系,详见上
innerRadius: 0.5 / 0.8,
radius: 0.8,
});
outterView
.interval()
.adjust('stack')
.position('percent')
.color('type*name', (type, name) => colorMap2[name])
.style({
stroke: 'white',
lineWidth: 1,
})
.label('name', {
offset: 10,
style: {
fill: '#666666',
// shadowBlur: 2,
// shadowColor: 'rgba(0, 0, 0, .45)',
},
});
this.DpTotalChart.interaction('element-active')
this.DpTotalChart.render();
}