Как разместить текст внутри кольцевой диаграммы (электронные диаграммы) - PullRequest
Новая
       105

Как разместить текст внутри кольцевой диаграммы (электронные диаграммы)

1 голос
/ 20 июня 2020

Я новичок в электронной диаграмме, мне нужно разместить текст в центре диаграммы пончиков. Я пробовал и гуглить бесполезно, я тоже пробовал 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>

1 Ответ

0 голосов
/ 24 июня 2020

Насколько я понимаю, вы не планируете ставить метки по центру, а только по сумме, да? В данном случае самый простой вариант - это markPoint (см. живой пример ): 

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

  // ...

}]

enter image description here

P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist

...