1、 基础饼图
Title
【整体】居中显示: le f t:50%
【文字】居中显示: texta lign:center
legend:
文字和图标的左右位置: align:'left',
朝向【垂直显示】: orient:'vertical',
位置【最左边显示】:left:0
饼图
修改圆的半径 radius:“50%”,
1.1charts 饼图的label放置于labelLine引导线上方
一般的饼图基础配置后长这样。
想要实现将文本放置在引导线上方,效果长这样
const options = {
// ...
series: [
{
label: {
padding: [0, -40],
},
labelLine: {
length: 10,
length2: 50,
},
labelLayout: {
verticalAlign: "bottom",
dy: -10,
},
},
],
};
label.padding设置是关键,它控制文字块的内边距[上,右,下,左],取值根据要展示的文本宽度估算一个数值;
labelLine设置引导线的长度,length第一条线、length2第二条线。
以上两种配置完基本可以看到文本与引导线在同一水平位置了
2、 环形图
添加属性: radius:[“40%”,“60%”],
添加提示框
3.1 案例
解析:
格式化数据
formatter: function (params) {
// console.log('params', params)
return `<div>
${params.seriesName}
<br/>
<div style="display:flex;align-items:center;">
<div style="width: 10px; height: 10px; background-color: ${params.color}; margin-right: 10px;border-radius:50%;"></div>
${params.name} ${formatNumber(params.value)} ${params.percent}%
</div>
</div>`
}
},
option = {
color: ['#09CCF3', '#FEB62C', '#477FFF', '#31CE81'],
tooltip: {
trigger: 'item',//axis显示该列下所有坐标轴对应数据,item只显示该点数据
backgroundColor: 'rgba(13, 23, 43, 0.74)',
borderColor: 'rgba(13, 23, 43, 0.74)',
textStyle: {
color: '#FFFFFF'
},
formatter: function (params) {
// console.log('params', params)
return `<div>
${params.seriesName}
<br/>
<div style="display:flex;align-items:center;">
<div style="width: 10px; height: 10px; background-color: ${params.color}; margin-right: 10px;border-radius:50%;"></div>
${params.name} ${formatNumber(params.value)} ${params.percent}%
</div>
</div>`
}
},
legend: {
bottom: '20',
show: true,
left: 'center',
icon: 'circle'
},
series: [
{
name: '渠道会话占比',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '42%'], //位置:饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
avoidLabelOverlap: false, //是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。
itemStyle: {
borderRadius: 10,
borderColor: '#fff'
},
label: {//文本标签
show: true,
position: 'outside'
},
labelLine: {//引导线
show: true
},
emphasis: {//高亮状态的扇区和标签样式
label: {
show: true,
fontSize: 25,
fontWeight: 'bold'
}
},
data: [
{
"name": "IM",
"value": 18
},
{
"name": "Facebook",
"value": 5
},
{
"name": "Instagram",
"value": 7
},
{
"name": "Whatsapp",
"value": 3
}
]
}
],
graphic: [
{
type: 'text',
left: 'center',
top: '35%', // 调整位置到环形图中间的上方
style: {
text: '总会话数', // 上方的文字内容
textAlign: 'center',
fill: '#909399', // 上方文字颜色
fontSize: 16
}
},
{
type: 'text',
left: 'center',
top: '41%', // 调整位置到环形图中间的下方
style: {
text: '11123', // 下方的文字内容
textAlign: 'center',
fill: '#303133', // 下方文字颜色
fontSize: 18,
fontWeight: 'bold'
}
}
]
}
3、南丁格尔图
添加属性roseType
4、 半圆环
步骤1:
步骤二:
将颜色变为透明,形成一个半圆
步骤三:
旋转
5、 案例
部分解析:
添加一个极坐标 ,