echarts实现半圆饼图

最新推荐文章于 2025-06-12 10:48:47 发布

原创最新推荐文章于 2025-06-12 10:48:47 发布 · 9.4k 阅读

2 ·

CC 4.0 BY-SA版权

前端常用知识专栏收录该内容

18 篇文章

订阅专栏

本文档将指导你如何利用ECharts库来实现一个吸引人的半圆饼图。通过实例代码和配置，详细解析了从初始化图表到设置饼图形状为半圆的过程，适合想要在项目中应用ECharts的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myChart = this.$echarts.init(document.getElementById('myChart'))
      let data = [
        {
          value: 57,
          name: '半年分配',
          itemStyle: {
            normal: {
              color: '#087EE0',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        },
        {
          value: 14,
          name: '按月分配',
          itemStyle: {
            normal: {
              color: '#79ADF9',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        },
        {
          value: 29,
          name: '到期分配',
          itemStyle: {
            normal: {
              color: '#C4D5FF',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        }]
      var a = 0
      for (let i = 0; i < data.length; i++) {
        a += data[i].value
      }
      data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,.0)'}}})
      let option = {
        series : [
          {
            name: '产品分配方式',
            type: 'pie',
            startAngle:-180,
            radius : '55%',
            center: ['50%', '60%'],
            data:data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{c}%'
              }
            }
          }
        ]
      }
      myChart.setOption(option)

参考文章：http://gallery.echartsjs.com/editor.html?c=xH1h_3TvEx