问如何在圆环图(echarts)中放置文本
EN

Stack Overflow用户

提问于 2020-06-20 14:34:21

回答 1查看 792关注 0票数 1

我是一个新的echarts，我需要将文本设置在甜甜圈图表的中心。我尝试了，谷歌它没有用，我也尝试了它的html，但我不能实现它。请任何人建议我，我该如何解决它。提前谢谢。

在选项中，我在标题中添加了总数，但我需要将其显示在中心位置。

var myChart = echarts.init(document.getElementById('pieChart1'));

var idx = 1;
pieChartOption =  {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    title: {
        text: "Total "+10+"%",
        left: 'center'
    },
    series: [
        {
            name: 'Test one',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
                show: true,
                color: '#000',
                fontSize: '80',
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
                {value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
                {value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
            ]
        }
    ]
} 
myChart.setOption(pieChartOption);

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using ECharts</title>
</head>

<body>
  <!-- 为ECharts准备一个具备大小的Dom-->
  <div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  
</body>
  <!--引入echarts. Using echarts-all.js for convenience -->
  <!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>

echarts

回答 1

Stack Overflow用户

发布于 2020-06-24 16:14:07

据我所知，你们不打算把标签放在中间，只放总数，对吗？在本例中，最简单的选项是markPoint (请参阅live example)：

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%',
    }],
  },

  // ...

}]

附注:示例中包含的库非常奇怪(版权？，二进制数据？)并扭曲违约行为。请不要使用它们，请从repo中获取任何包，而不是https://www.jsdelivr.com/package/npm/echarts?path=dist

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62482485

复制

相似问题

问如何在圆环图(echarts)中放置文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在圆环图(echarts)中放置文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在圆环图(echarts)中放置文本
EN