javascript - how to create semi donut chart in E-Chart - Stack Overflow

admin管理员组

文章数量:1357078

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

Share Improve this question Follow asked Feb 5, 2020 at 5:24 uvanuvan 5522 silver badges88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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],
                },
            },
        ],
    };

本文标签： javascripthow to create semi donut chart in EChartStack Overflow