echarts饼图间隔

最新推荐文章于 2024-08-11 12:50:45 发布

hhsway

最新推荐文章于 2024-08-11 12:50:45 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_38439885/article/details/79894275

前端专栏收录该内容

2 篇文章

订阅专栏

本文记录了在工作中使用ECharts生成图表时，如何针对数据为0的情况调整饼图的显示，使其达到特定视觉效果。

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

最近工作用到了echarts生成图表，特此记录。

原本生成饼图如图所示。因要求数据为0时显示如下图2所示。附上代码。

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));


// 指定图表的配置项和数据
var option = {
    title : {
        text: '住院医疗品质',
        // subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        // trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        left: 'right',
        // 图例名字和数据的名字一定要一致，鼠标悬停图例和单击图例有功能
        data: ['已购买日额型险种','缺口金额']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            radius : ['50%', '10%'],
            // 水平位置，垂直位置
            // center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{d}%'


                    
                }
            },
            data:[
                {value:0, name:'已购买日额型险种'},
                {value:310, name:'缺口金额'}
            ],
            itemStyle: { 
                normal: { 
                    borderColor: "#FFFFFF", borderWidth: 1, 
                }
            },
        }
    ]
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

此部分代码实现功能

 itemStyle: { 
      normal: { 
         borderColor: "#FFFFFF", borderWidth: 1, 
      }
 },