关于echarts生成空心扇形图，并且在中心位置、以及扇叶上展示数据。在图形外展示文字等问题

关于echarts生成空心扇形图，并且在中心位置、以及扇叶上展示数据。在图形外展示文字等问题
今日在写一个关于pc端的后台管理系统，用的是ant design框架，项目中有图表样式，需要用到echarts，结果因为不熟悉吃了很多亏，今天给大家一起分享一下，有什么不足的希望大佬们多指教。
1.安装echarts命令 ： npm install echarts --save
2.main.js全局引用 ：import echarts from ‘echarts’ // 引用echarts
Vue.prototype.$echarts = echarts
3.给标签设置ref，进行echarts绑定

因为我要多个div进行绘制图形，所以我把绘制图标的方法进行了封装

封装的具体方法如下：
上边圈起来的是下图中，“及时、逾期” 的效果


有人会发现为什么一个图形要还两次，因为我在绘制的过程中发现，label中的normal中的position设置之后只会生效一下，也就是在图形的中心和在扇形叶上数据只会展示一个，会覆盖掉，所以我就绘制第一个图形时，让他中心数据展示，再绘制第二个图形，尺寸和第一个一样，那么中心数据就不会覆盖掉，然后设置扇形叶上的数据。

**下边这张图片是设置的文字
**效果图是下边的 “目标、全国”的数据展示

代码如下奉上，有兴趣的大家可以一起讨论
mounted() {
// 调用echarts绘制图表
let firstName = this.KaTeX parse error: Expected 'EOF', got '}' at position 89: …,'85','83'); }̲, methods: { ge…echarts.init(firstName);
// 为图表添加数据
myChart.setOption({
color: ["#0070BF", “#FF0000”],
legend: {
type: “scroll”,
orient: “horizontal”,
left: 20,
bottom: 0,
data: data.legendData,
selected: data.selected
},
series: [
{
name: “访问来源”,
type: “pie”,
radius: [“50%”, “70%”],
avoidLabelOverlap: false,
hoveranination: false,
silent: true,
label: {
normal: {
show: true,
position: “center”,
formatter: function(argument) {
return data;
},
textStyle: {
fontSize: 20,
color: color
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{ value: first, name: “及时” }, { value: second, name: “逾期” }]
},
{
name: “访问来源”,
type: “pie”,
radius: [“35%”, “70%”],
avoidLabelOverlap: false,
hoveranination: false,
silent: true,
labelLine: {
normal: {
show: false
}
},
data: [
{ value: first,name: ‘及时’},
{ value: second, name:‘逾期’}
],
label: {
normal: {
show: true,
position: “inner”,
formatter: function(param) {
return param.data.value;
},
textStyle: {
fontSize: 15,
color: “white”
}
}
}
}
],
graphic: [
{
type: ‘group’,
right: 0,
bottom: 0,
children: [
{
type: ‘text’,
style: {
fill: ‘#333’,
text: [
全国：${national}%
].join(’\n’),
font: ‘14px STHeiti’
}
}
]
},
{
type: ‘group’,
right: 0,
bottom: 20,
children: [
{
type: ‘text’,
style: {
fill: ‘#333’,
text: [
目标：${target}%
].join(’\n’),
font: ‘14px STHeiti’
}
}
]
}
],

  });

}