echarts 饼图

半兽人 发表于: 2023-04-24   最后更新时间: 2023-04-26 18:34:50  
{{totalSubscript}} 订阅, 600 游览
option = {
  tooltip: {
    show: false
  },
  series: [
    {
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          fontSize: '20',
          fontWeight: 'normal',
          color: '#5BC49F'
        },
        emphasis: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 120,
          name: '120/134',
          itemStyle: {
            emphasis: {
              color: '#5BC49F'
            },
            normal: {
              color: '#5BC49F'
            }
          }
        },
        {
          value: 14,
          name: '120/134',
          itemStyle: {
            emphasis: {
              color: '#F7F7F7'
            },
            normal: {
              color: '#F7F7F7'
            }
          }
        }
      ]
    }
  ]
};

在线运行

option = {
  series: [
    {
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        color: '#1B7AFA',
        fontSize: 20,
        fontWeight: 'normal',
        formatter: function (params) {
          return params.data.name;
        }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          value: 10,
          name: '10/11',
          itemStyle: {
            emphasis: {
              color: '#39F'
            },
            normal: {
              color: '#39F'
            }
          }
        },
        {
          value: 1,
          name: '1/11',
          itemStyle: {
            emphasis: {
              color: '#F7F7F7'
            },
            normal: {
              color: '#F7F7F7'
            }
          },
          label: {
            show: false
          }
        }
      ]
    }
  ]
};

在线运行

相关链接

https://echarts.apache.org/zh/option.html#series-pie

更新于 2023-04-26
在线,27分钟前登录

查看echarts更多相关的文章或提一个关于echarts的问题,也可以与我们一起分享文章