如图
直接上代码
let chartData = { value: 90, total: 100 }; let max = chartData.total; let value = chartData.value; var option = { title: [ { top: "40%", left: "center", text: value + "{b|分}", textStyle: { color: "#00a464", fontSize: 26, fontWeight: 700, rich: { b: { color: "#00a464", fontSize: 12, fontWeight: 700 } } } }, { top: "55%", left: "center", text: "总分:1000分", textStyle: { color: "#222B29", fontSize: 12, fontWeight: 700 } } ], angleAxis: { axisLine: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, axisTick: { show: false }, max: 100, startAngle: 100 }, radiusAxis: { type: "category", axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: true }, data: [] }, polar: { radius: "130%", center: ["50%", "50%"] }, series: [ // 极坐标系下柱状图 // 实际值 { type: "bar", data: [value], z: 1, coordinateSystem: "polar", barMaxWidth: 15, name: "出租率", roundCap: 1, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0.5, color: "rgba(72, 195, 124, 1)" }, { offset: 0, color: "rgba(117, 214, 138, 0.9)" } ]) }, // 背景图形 { type: "pie", data: [max], z: 0, silent: true, radius: ["60.5%", "68.5%"], roundCap: true, color: "rgba(145,145,145,0.4)", barGap: "-100%" }, // 尾端小圆点 饼图 { type: "pie", radius: ["65%", "65%"], hoverAnimation: false, startAngle: 100, endAngle: 0, silent: 1, z: 10, data: [ { name: "", value: value, itemStyle: {}, label: { show: true, position: "center", color: "#fff", fontSize: 38, fontWeight: "bold", formatter: function(o) { // return data } }, labelLine: { show: false, emphasis: { show: false } } }, { //画中间的图标 name: "", value: 0, label: { position: "inside", backgroundColor: { image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANfSURBVHgBxZfPixRHFMffq+ofO5OZ6O6YGXaToEskIughBHLeg8clt1mQkJAQMARyiGzubu6KF0VYBUUPgnvUP0D/AC8iiCKoKLPO6uyqPdsz3VXVz6qRWbS658fuNvg5zMCrN+/7XnfVqzcIY1C/UecwN1coNbuTvDxRkgQ+KeRmDTmpJKGQh1HH/br0bnnqr7fjxMRRgv5Px6oOyVpfaGRAVLHk3uuovdpaObIUb1v418cXqpwnM+MKZiWQxNi4evif1tjCv7y4+I3TFTXIAdbprF0+uvh8pPCfjXP7Zcj2QY6giFpXDp98OlB4WKWuUOUyRPOc6EcgOIRI08ZOgI/0V0Mi3Nlwv7gJA7Ar3xL+7cG5CrrsQNaP9orunAfylFYpwxB0Eqs6geVBCSSAz68d/Hutl4j5qN9f8phHM1nOFREueiRPjxL9UAVNu0SnpkR4ImudJ8lMnep8S3iyNF0h4p7taAJwSo7DNnEoOVGJw0XbTgy5/+xYdUs4VnFqM02qzrwJADuEQ3L8S/2KbLsTy5qpGn9/cnYvKf872+GrePOmeXSwO4INLPwsXB58bNyQwSMm3FLJ9jbV5iBq6J0E21gtFfYwHlHRXtCbYA5ygpnjZxFJXmZSiZSwPmMzkJcw0ve2jcfgM5elezFS2nnHULoIs7sZfCaYSEjZRtOBICeIei31E1BrMt02opQzwkPISxihYdsSTiFLHC9ILQDehZwQBHdsm+cnIfPb66lRJXD8W3prB7BL9GNefeunLwz5SrVZcGg2tN+zQB50wfkfdomee5Ztm36a0ZUfTr5hK7igSp7TtB3euRO3FbLrsEMksuWsaoWU6+a7d5w29k+uZe3ulls8YwLANlHArq+7xcxqlay93hI2VXPGGllBTIAI+ZJ5XzCaoIvOfy2veCZrEYVaXTmy0Js8Pxl9/nh8/ludVXVQ1D2iM++B7uO6G+lLpNfdegkxeCj0SdgE/5Z9E/VhoEefgxmjTx99TR7Q12QFcgS5HvZmhwx7fUZVvh3sSocKG8zwRy6fZkA+7ADFmJzY7L68dPTfZtb68L8w9294Zae5TzjO1LgJGEEvFq+Ce7XmysKCGuSHMCZmRMK2V1ZFt5BgUtDDgtMXQqZiJ4A2uu03wb3ZcJhgn/ePWX8JsqXMiQAAAABJRU5ErkJggg==" }, width: 20, height: 20, borderRadius: 30, padding: 10 } }, { //画剩余的刻度圆环 name: "", value: max - value, label: { show: false }, labelLine: { show: false, emphasis: { show: false } } } ] } ] };