如何在电子图表中创建半圆环图

Question

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

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

图片链接：https://i.sstatic.net/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

试试这个。

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

};

Answer 2

我的做法是将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 3

最好的

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

测试：https://codesandbox.io/s/7ruys9?file=/index.js

Answer 4

试试这个。我添加了图表底部的摘要。

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,
    });
}

然后我隐藏了半底图。

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

Answer 5

最好的办法就是修改你的数据部分

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

半个甜甜圈