echarts三环环形图，在环形图的每个扇形之间加空隙
Posted ThinkerWing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts三环环形图，在环形图的每个扇形之间加空隙相关的知识，希望对你有一定的参考价值。
代码还有很多的优化空间，主要也就是环形图的几个配置比较重要，毕竟官方文档太长了（难找），还是记录一下。
配置
1. 实现环形图不同区域之间的空隙
itemStyle: normal: borderColor: "#FFFFFF", borderWidth: 1,
2. 显示数据名，这里还是需要看一下官方文档， a系列名 b数据名就是下面data里面的name，c对应value
data: [
value: 25,
name: 'thinker'
,
value: 55,
name: 'wing'
]
3. 字体旋转
series-pie.label. rotatebooleannumber
标签旋转：
如果为 true，则为径向排布。
如果为 number ，旋转指定角度，从 -90 度到 90 度。正值是逆时针。
label: //饼图图形上的文本标签
normal:
show: true,
position: 'inner', //标签的位置
textStyle:
fontWeight: 300,
fontSize: 16, //文字的字体大小
,
rotate: 'tangential',
formatter: 'a\\nb'
4.不同层级环的粗细radius: ['93%', '96%'],通过改变这个慢慢微调
代码部分
可以直接新建一个html文件打开预览
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin="anonymous"
integrity="sha512-RjdGUelydi9tlywPU+UXK4pTF9zeUAVxnMIvNgy5HJAzCLj/tllE0Z1UxxbemFknstsiKZZXlP/pedzZ86kvFw=="
src="https://lib.baomitu.com/echarts/5.3.0/echarts.common.js"></script>
<meta charset="UTF-8">
<title>echarts.js案例一</title>
</head>
<body>
<div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
var checkName = ''; //点击柱子的名字
var BorderWidth = '6';
//反方向剩下部分的样式
var placeHolderStyle =
normal:
label:
show: false,
position: "center"
,
labelLine:
show: false
,
// color: "#3A4154",
color: "white",
borderColor: "#3A4154",
borderWidth: 6
,
emphasis:
color: "#dedede",
borderColor: "#dedede",
borderWidth: 0
,
itemStyle:
borderWidth: 5, //设置border的宽度有多大
borderColor: '#fff',
,
option =
backgroundColor: '#fff',
tooltip:
trigger: 'item',
formatter: function (params)
return `$params.name$params.value <br/> 占比%`
,
color: ['#7B79FF', '#FFB0E2', '#59CFFF', 'red', 'green', 'yellow', 'black', 'pink'],
series: [
name: '入厕人数',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['93%', '96%'],
itemStyle:
normal:
label:
show: false,
position: 'outside'
,
labelLine:
show: false,
length: 100,
smooth: 0.5
,
borderWidth: BorderWidth,
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
,
data: [
value: 7,
name: '入厕人数',
itemStyle: placeHolderStyle.itemStyle
,
value: 5,
name: '',
itemStyle: placeHolderStyle.itemStyle
,
value: 4,
name: '入厕人数',
itemStyle: placeHolderStyle.itemStyle
,
value: 3,
name: '入厕人数',
itemStyle: placeHolderStyle.itemStyle
,
value: 3,
name: '',
itemStyle: placeHolderStyle.itemStyle
]
,
name: '就餐人数',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: ['55%', '92%'],
itemStyle: placeHolderStyle.itemStyle,
data: [
value: 6,
name: '就餐人数',
itemStyle: placeHolderStyle.itemStyle
,
value: 4,
name: '4ren',
itemStyle: placeHolderStyle.itemStyle
]
,
name: '购物人数',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: ['30%', '54%'],
itemStyle: placeHolderStyle.itemStyle,
label: //饼图图形上的文本标签
normal:
show: true,
position: 'inner', //标签的位置
textStyle:
fontWeight: 300,
fontSize: 16, //文字的字体大小
,
rotate: 'tangential',
formatter: 'a\\nb'
,
data: [
value: 25,
name: 'thinker',
itemStyle: placeHolderStyle.itemStyle
,
value: 55,
name: 'wing',
itemStyle: placeHolderStyle.itemStyle
]
]
;
myChart.setOption(option);
</script>
</html>
以上是关于echarts三环环形图，在环形图的每个扇形之间加空隙的主要内容，如果未能解决你的问题，请参考以下文章