I want to make a "Half Doughnut" chart. It should be like first chart in the picture.

But in my chart space occupies above the chart (Second chart). is it possible to remove that space.

Image link: .png

My code :

option = {

    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: 'half semi',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '100%'],
            startAngle: 180,
            endAngle: 360,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },

            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 3, name: 'ok' },
                { value: 5, name: 'bad' },
                { value: 2, name: 'warning' },
                { value: 10, name: 'bottom' }
            ]
        }
    ]
};

I want to make a "Half Doughnut" chart. It should be like first chart in the picture.

But in my chart space occupies above the chart (Second chart). is it possible to remove that space.

Image link: https://i.sstatic/xPOUU.png

My code :

option = {

    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: 'half semi',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '100%'],
            startAngle: 180,
            endAngle: 360,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },

            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 3, name: 'ok' },
                { value: 5, name: 'bad' },
                { value: 2, name: 'warning' },
                { value: 10, name: 'bottom' }
            ]
        }
    ]
};

• javascript
• pie-chart
• echarts

5 Answers 5

Try this.

option = {
tooltip: {
    trigger: 'item',
    formatter: function (p) {
        console.log(p)
            return `${p.name}: ${p.value} ${p.percent*2}%`;
        }
},
legend: {
    orient: 'vertical',
    left: 10,
},
series: [
    {  
        startAngle: 180,
        endAngle: 360, 
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {value: 1, name: 'data-a'},
            {value: 1, name: 'data-b'},
            {value: 3, name: 'data-c'},
            {value: 5, name: 'data-d'},
            {
                value: 10,
                name: null,
                itemStyle:{opacity:0},
                tooltip:{show:false } 
            }
        ]
    }
], 

};

the way I did it was to put the echarts inside a wrapper div and then set height and overflow:

<div class="tracker-gauge">
  <div echarts [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
</div>

And then in css:

.tracker-gauge {
  overflow: hidden;
  height: 140px;

  div {
    height: 220px;
  }
}

Also, I used "gauge" chart instead of "pie" chart.

The best thing to do it is to modify ur data part

data: [
              { value: capacityData ? capacityData[0] : 0, name: "Load" },
              {
                value: capacityData ? capacityData[1] : 0,
                name: "Capacity",
                itemStyle: {
                  color: "#DD8283",
                  decal: {
                    symbol: "none",
                  },
                },
              },
              {
                value: capacityData ? capacityData[0] + capacityData[1] : 0, //a transparent slice to create the half-doughnut effect
                name: "",
                itemStyle: {
                  color: "transparent",
                },
              },
            ],

half Doughnut

The best

var start = 180*90/100;
var end = 180*10/100;
var discard = 180;

option = {
    series: [{
        name: 'half semi',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '100%'],
        startAngle: 180,
        clockwise: true,
        data: [{
                value: start,
                name: 'ok'
            },
            {
                value: end,
                name: 'bad'
            },
            {
                value: discard,
                name: 'discard'
            }
        ]
    }]
};

TEST: https://codesandbox.io/s/7ruys9?file=/index.js

Try this. I'm add summary for make half bottom of chart.

const dataFromAPI = [
    { name: '25 - 35', value: 382 },
    { name: '35 - 45', value: 159 },
    { name: '>45', value: 83 },
];

const summary = dataFromAPI.reduce((acc, curr) => acc + curr.value, 0);
const lastItem = dataFromAPI[dataFromAPI.length - 1];

if (lastItem.name !== '' && lastItem.value !== summary) {
    dataFromAPI.push({
        name: '',
        value: summary,
    });
}

Then I hidden half bottom chart.

    chartOption: EChartsOption = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: '5%',
            left: 'center',
        },
        series: [
            {
                startAngle: 180,
                clockwise: true,
                type: 'pie',
                radius: ['50%', '60%'],
                center: ['50%', '100%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    fontWeight: 'bold',
                    padding: [0, 0, 50, 0],
                },
            },
        ],
    };