代码还有很多的优化空间,主要也就是环形图的几个配置比较重要,毕竟官方文档太长了(难找),还是记录一下。
配置
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}\n{b}'
}
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}\n{b}'
}
},
data: [{
value: 25,
name: 'thinker',
itemStyle: placeHolderStyle.itemStyle
},
{
value: 55,
name: 'wing',
itemStyle: placeHolderStyle.itemStyle
}
]
}]
};
myChart.setOption(option);
</script>
</html>