如何将文本放入圆环图（echarts）中
我是 echarts 的新手，我需要将文本设置在甜甜圈图表的中心。我尝试过，谷歌搜索它没有用，我也通过 html 尝试过，但我无法实现它。请任何人建议我，我该如何解决它。提前致谢。
\n\n在选项中，我在标题中添加了总数，但我需要将其显示在中心。
\n\n\r\n
\r\n\n
\r\n
\r\nvar myChart = echarts.init(document.getElementById(\'pieChart1\'));\r\n\r\nvar idx = 1;\r\npieChartOption = {\r\n tooltip: {\r\n trigger: \'item\',\r\n formatter: \'{a} <br/>{b}: {c} ({d}%)\'\r\n },\r\n title: {\r\n text: "Total "+10+"%",\r\n left: \'center\'\r\n },\r\n series: [\r\n {\r\n name: \'Test one\',\r\n type: \'pie\',\r\n radius: [\'50%\', \'70%\'],\r\n avoidLabelOverlap: true,\r\n label: {\r\n show: true,\r\n color: \'#000\',\r\n fontSize: \'80\',\r\n position: \'center\'\r\n },\r\n emphasis: {\r\n label: {\r\n show: true,\r\n fontSize: \'30\',\r\n fontWeight: \'bold\'\r\n }\r\n },\r\n labelLine: {\r\n show: false\r\n },\r\n data: [\r\n {value: 10, name: \'Success\', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: \'#5E50A1\'}}},\r\n {value: 20, name:\'Failed\', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: \'#FFB200\'}}},\r\n {value: 30,name:\'Onprocess\', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: \'#FF434F\'}}}\r\n ]\r\n }\r\n ]\r\n} \r\nmyChart.setOption(pieChartOption);<html lang="en">\r\n<head>\r\n <meta charset="utf-8">\r\n <title>Using ECharts</title>\r\n</head>\r\n\r\n<body>\r\n <!-- \xe4\xb8\xbaECharts\xe5\x87\x86\xe5\xa4\x87\xe4\xb8\x80\xe4\xb8\xaa\xe5\x85\xb7\xe5\xa4\x87\xe5\xa4\xa7\xe5\xb0\x8f\xe7\x9a\x84Dom-->\r\n <div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>\r\n \r\n</body>\r\n <!--\xe5\xbc\x95\xe5\x85\xa5echarts. Using echarts-all.js for convenience -->\r\n <!-- CDN is taken from https://cdnjs.com/libraries/echarts -->\r\n <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>\r\n</html>据我了解，您不打算将标签放在中心，而只打算将总数放在中间，对吧？在这种情况下，最简单的选项是标记点（参见实时示例）：
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
您在示例中包含的 PS 库非常奇怪（版权？，二进制数据？）并且扭曲了默认行为。请不要使用它们，而是从存储库中获取任何包https://www.jsdelivr.com/package/npm/echarts?path=dist
| 归档时间： |
|
| 查看次数： |
3740 次 |
| 最近记录： |