echarts中饼图加圆点 由于找不到怎么设置小圆点，尝试使用scatter散点图的方式，但是定位会出现问题
下面上上面示意图的完整代码如下：
var data = {
'name': '本年冷量',
'value': [329.2],
};
var color = ['rgba(45, 82, 216, 1)', '#00B1BF', '#00F7F8']
let option = {
title: {
text: [
'{a|' + data.value[0] + '}{b|GJ}',
'{c|本年冷量}'
].join('\n'),
textStyle: {
rich: {
a: {
fontSize: 30,
color: color[0],
fontWeight: 'bold'
},
b: {
fontSize: 16,
color: '#000',
verticalAlign: 'bottom',
padding: [0, 0, 5, 5] // 调整位置
},
c: {
fontSize: 14,
color: '#666',
padding: [10, 0, 0, 0]
}
}
},
left: 'center',
top: 'center',
itemGap: 0
},
tooltip: {
formatter: function (params) {
return '<span style="color: #000;">占比：' + params.value + '%</span>';
}
},
angleAxis: {
max: 1000,
clockwise: true, // 逆时针
// 隐藏刻度线
show: false,
startAngle: 90,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
polar: [{
center: ['50%', '50%'], //中心点位置
radius: '90%' //图形大小
}],
series: [
{
name: '小环',
type: 'gauge',
splitNumber: 12,
radius: '60%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: color[1],
width: 3.5,
shadowBlur: 1,
shadowColor: color[1],
},
length: 0,
splitNumber: 3
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
}, {
type: 'bar',
z: 10,
data: data.value,
showBackground: false,
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'rgba(45, 82, 216, 1)'
},
{
offset: 0.85,
color: 'rgba(45, 82, 216, 0)'
},
{
offset: 1,
color: 'rgba(45, 82, 216, 0)'
}]),
shadowBlur: 5,
shadowColor: '#2A95F9',
}
},
},
{
type: 'pie',
name: '内层细圆环',
radius: ['48%', '30%'],
startAngle: 90,
hoverAnimation: false,
clockWise: true,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
offset: 0,
color: 'rgba(45, 82, 216, 0.5)' // 12点方向深色
},
{
offset: 1,
color: 'rgba(45, 82, 216, 0.1)' // 回到12点方向完全透明
}]),
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [100]
},
],
graphic: [{ //2、中心的文字设置
type: 'text',
z: 100,
left: 'center',
top: '28%',
style: {
x: 0,
y: 0,
fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色
text: "•", // 小圆点
font: 'bolder 30px "Microsoft YaHei", sans-serif',
textAlign: 'center', //3、居中显示
stroke: '#fff', // 边框颜色为白色
lineWidth: 2, // 设置边框宽度为2px
}
}]
};graphic: [{ type: 'text', z: 100, left: 'center', top: '28%', style: { x: 0, y: 0, fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色 text: "•", // 小圆点 font: 'bolder 30px "Microsoft YaHei", sans-serif', textAlign: 'center', stroke: '#fff', // 边框颜色为白色 lineWidth: 2, // 设置边框宽度为2px } }]简单好用