Question

我想制作一个“半甜甜圈”图表。它应该像图片中的第一个图表。

但是在我的图表中空间占据了图表上方（第二个图表）。是否可以删除该空间。

图片链接：https://i.stack.imgur.com/xPOUU.png

我的代码：

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' }
            ]
        }
    ]
};

Answer 1

我的方法是将echarts放入包装div中，然后设置高度和溢出量：

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

然后在CSS中：

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

  div {
    height: 220px;
  }
}

此外，我使用的是“仪表”图表而不是“饼图”。

Answer 2

尝试一下。

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

};

如何在电子图表中创建半甜甜圈图

2 个答案: