This article records some renderings and codes of common pie charts, which can be applied directly when needed. This article only lists the configuration item codes of echarts. If you don’t know how to use echarts, you can check the official documents .
Basic pie chart, selected highlight
Effect picture:
configuration items:
option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center'
},
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会' },
{
value: 484, name: '1号店' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
text formatting
Effect picture:
configuration items:
option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center'
},
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会' },
{
value: 484, name: '1号店' }
],
label: {
show: true,
formatter: function (params) {
return `${
params.name}平台${
params.value}元\n占比：${
params.percent}%`
}
}
}
]
}
selected mode
selectedMode: The configuration of the selected mode, indicating whether to support multiple selections. It is disabled by default. It supports Boolean values and strings. The string values can be selected as 'single', 'multiple', and 'series', which represent single selection, multiple selection and selection respectively. the whole series.
Single-selection renderings:
Multi-selection renderings:
Series renderings:
Configuration items:
option = {
legend: {
left: 'center'
},
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会' },
{
value: 484, name: '1号店' }
],
// true或者'single'表示单选，'multiple'表示多选，'series' 表示选择整个系列
selectedMode: true
}
]
}
Label alignment
默认对齐方式, the length of the guide line is a fixed value, the rendering:
引导线末端对齐, the rendering:
Configuration items:
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会' },
{
value: 484, name: '1号店' }
],
label: {
alignTo: 'labelLine'
}
}
]
文字对齐, renderings:
configuration items:
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝111' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会222' },
{
value: 484, name: '1号店' }
],
label: {
alignTo: 'edge',
// 文字边距，仅当 label.position 为 'outer' 并且 label.alignTo 为 'edge' 时有效，默认'25%'
edgeDistance: '10%'
}
}
]
text on both sides of the leader line
Effect picture:
configuration items:
option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center'
},
series: [
{
name: '电商',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '淘宝111' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会222' },
{
value: 484, name: '1号店' }
],
label: {
alignTo: 'edge',
edgeDistance: '10%',
formatter: '{b}平台：{c}\n占比：{d}',
lineHeight: 25
},
labelLine: {
length: 15,
length2: 0
},
labelLayout: function (params) {
// myChart是echart实例对象
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
}
}
]
}
Donut chart, rounded corners, centered text
Effect picture:
configuration items:
option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center'
},
series: [
{
name: '电商',
type: 'pie',
radius: ['40%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{
value: 1048, name: '淘宝' },
{
value: 735, name: '京东' },
{
value: 580, name: '唯品会' },
{
value: 484, name: '1号店' }
],
}
]
}
rose diagram
Effect picture:
configuration items:
option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'center'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: ['20%', '75%'],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{
value: 40, name: 'rose 1' },
{
value: 38, name: 'rose 2' },
{
value: 32, name: 'rose 3' },
{
value: 30, name: 'rose 4' },
{
value: 28, name: 'rose 5' },
{
value: 26, name: 'rose 6' },
{
value: 22, name: 'rose 7' },
{
value: 18, name: 'rose 8' }
]
}
]
}