v-charts 环形图中间文字，线条设置

最新推荐文章于 2026-06-17 11:47:07 发布

原创最新推荐文章于 2026-06-17 11:47:07 发布 · 2.9k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用Ve-Ring组件进行图表配置，包括线条设置、环内文字及单位的自定义展示，通过具体代码示例展示了如何调整偏移量、半径、延长线长度等参数，并设置环形图内的文字内容、样式以及单位。

线条设置环内文字，单位

 <ve-ring 
  :data="chartData" height='800px' 
  :settings="chartSettings" 
  :events="chartEvents" 
  :graphic='graphic' 
  :legend-visible='false'
   :extend ='extend '
    :tooltip-visible='false' 
></ve-ring>

data() {
return {
	  this.chartSettings={
            offsetY: 320,
            radius: [125, 170],
            labelLine: {//设置延长线的长度
            normal: {
                length: 45,//设置延长线的长度
                length2: 80,//设置第二段延长线的长度
            },
            }
       };
       //  环内文字设置：
            this.graphic= [{　　　　
                    type: 'text',　
                    left: 'center',　　　　　　　　　　
                    top: '32%',
                    style: {　　　　　　　　　　　　　　　　
                        text: "客户数量",
                        textAlign: 'center',
                        fill: '#999999',　
                        fontSize: 21,
                        color: "#4d4f5c",
                    }
                },
                 {
                    type: 'text',
                    left: 'center',
                    top: '38%',
                    style: {
                        text: this.textData + '位',
                        textAlign: 'center',
                        fill: '#000',
                        fontSize: 25,
                    }
        }];
        // 环内文字单位
          this.extend ={
            label:{
                formatter: '{b} : {c} 位',
                    color:'#000',
                    fontSize:16
            }
        };
  }
}