【最新版】echarts饼图中间有间隔

蓝胖子的多啦A梦

已于 2023-09-25 09:17:49 修改

阅读量2k

点赞数

文章标签： echarts vue.js css

于 2023-04-14 15:07:31 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/130154103

版权

方法一

使用selected:true

var chartPieState = echarts.init(document.getElementById('chartPieState'));

在这里插入图片描述

在需要间隔的部分加一个 selected:true 即可

option = {

  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
            label: {
                normal: {
                    position: 'inner',
                    show: true,
                    formatter: '{b}: {d}%'
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
      data: [
        { value: 1048, name: '7-10天',selected:true },
        { value: 735, name: '超过30天' },
      ],
    }
  ]
};

有的可能使用 selected:true 属性 并没有效果可以使用 borderWidth属性设置

方法二

通过设置 borderWidth 增加间隔

在这里插入图片描述

series: [
    {
      type: 'pie',
      radius: '50%',
            label: {
                normal: {
                    position: 'inner',
                    show: true,
                    formatter: '{b}: {d}%'
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            itemStyle:{
                 borderWidth:10,
                 borderColor:'rgb(16,12,42)',
            },
      data: [
        { value: 1048, name: '7-10天',},
        { value: 735, name: '超过30天' },
      ],
    }
  ]