Detailed implementation of custom pie chart
File Directory
Get Echarts
Introduce Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>
Draw a chart
Before drawing, we need to prepare a DOM container with height and width for ECharts
<body style="background: black;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
</body>
Then you can initialize an echarts instance through the echarts.init method and generate a custom pie chart through the setOption method
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
</script>
Code step split
var option = {} // Specify the configuration and data of the icon
data source
// 数据集
var dataList = [
{
name: '其他-累计充值金额', value: 44},
{
name: '当前-累计充值金额', value: 98}
]
Custom rich text style
var rich = {
otherCenter: {
borderColor: "#6482FF",
width: 0,
align: "center",
borderWidth: 1,
height: 46
},
otherCenter1: {
borderColor: "#6482FF",
width: "100%",
borderWidth: 1,
height: 0
},
otherCenterNumColor: {
color: "#6482FF",
fontSize: '28',
align: "left",
lineHeight:38
},
otherCenterTextColor: {
color: "#C2CBF2",
fontSize: '24',
align: "left"
},
center: {
borderColor: "#25eaff",
width: 0,
align: "center",
borderWidth: 1,
height: 46
},
center1: {
borderColor: "#25eaff",
width: "100%",
borderWidth: 1,
height: 0
},
centerNumColor: {
color: "#25eaff",
fontSize: '28',
align: "left",
lineHeight:38
},
centerTextColor: {
color: "#C2CBF2",
fontSize: '24',
align: "left"
}
}
- When the label attribute does not have rich custom rich text
- When the label attribute has rich custom rich text
For specific details of the rich attribute, please see: https://echarts.apache.org/zh/option.html#series-pie.label.richrich
text label: https://echarts.apache.org/zh/tutorial.html# Rich text label
title
title: {
text: '充值数据',
show: true,
textStyle: {
color: '#fff',
fontSize: '36',
fontFamily: 'Microsoft YaHei',
fontWeight: 400
},
top: 42,
left: 40
}
tooltip (tip component)
tooltip: {
// 提示框组件
show: false
}
series (series list. Each series determines its own chart type by type)
- Object one
Code disassembly:
first step:
{
type: 'pie',
data: dataList.map((item,index) => {
return {
...(item || {
})
};
})
}
Step 2: Please see the rich link above for the specific attributes
{
type: 'pie',
data: dataList.map((item,index) => {
console.log({
...(item|| {
})})
return {
...(item || {
}),
label: {
normal: {
show: true,
rich: rich,
padding: [0, -103], // 文字块的内边距 padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距
height: 213, // 文字块的高度。一般不用指定，不指定则自动是文字的高度 注意，如果不定义 rich 属性，则不能指定 width 和 height
formatter: (params) => {
if (index === 0) {
return (
`{otherCenterTextColor|其他-累计充值金额}` +
"\n" +
`{otherCenterNumColor|${
Math.round(params.value)}}` +
"\n{otherCenter1|}\n{otherCenter|}\n"
);
}
return (
`{centerTextColor|当前-累计充值金额}` +
"\n" +
`{centerNumColor|${
Math.round(params.value)}}` +
"\n{center1|}\n{center|}\n"
);
},
},
},
};
})
}
When padding and height are removed: when
formatter is removed:
third step:
labelLine: {
normal: {
show: true,
length: 100,
length2: 135
}
}
- Object two
{
type: 'pie',
radius: ['50%', '58%'],
data: dataList.map((item,index) => {
return {
...(item || {
}),
itemStyle:{
color: index == 0 ? '#1D2549' : '#224D72'
}
}
})
}
Code steps
first step:
{
type: 'pie',
data: dataList.map((item,index) => {
return {
...(item || {
}),
itemStyle:{
color: index == 0 ? '#1D2549' : '#224D72'
}
}
})
}
The second step:
{
type: 'pie',
radius: ['50%', '58%'],
data: dataList.map((item,index) => {
return {
...(item || {
}),
itemStyle:{
color: index == 0 ? '#1D2549' : '#224D72'
}
}
})
}
When radius: ['50%', '70%']
When radius: ['50%', '55%']
When radius: ['70%', '58%']
radius: ['40%', '58%']
