let option = {
// 设置背景颜色为白色
backgroundColor: 'white',
// 设置饼图标题配置
title: {
text: '任务执行状态', // 饼图标题文本
left: 'center', // 标题居中显示
textStyle: {
color: '#000', // 标题字体颜色为黑色
fontSize: 24, // 标题字体大小为24px
fontWeight: 'bold', // 标题字体加粗
},
},
// 设置提示框样式配置
tooltip: {
trigger: 'item', // 提示框触发方式为数据项触发
backgroundColor: '#ffffff', // 提示框背景颜色为白色
padding: [8, 16], // 提示框内边距
textStyle: {
color: '#6a6a6a', // 提示框文本颜色为灰色
fontSize: 16, // 提示框文本字体大小为16px
},
// 自定义提示框内容格式化函数
formatter: function (params) {
// 返回自定义的提示框内容
return (
'任务执行状态' +
'<br />' +
params.marker + // 数据项标记
'<span style="color:' +
params.color +
'">' +
params.data['name'] + // 数据项名称
'\n' +
'<span style="color:#666666">' +
params.data['value'] + // 数据项值
'</span></span>'
);
},
},
// 设置图例配置
legend: {
orient: 'vertical', // 图例排列方向为垂直
top: 20, // 图例距离容器上边缘的距离为20px
left: 40, // 图例距离容器左边缘的距离为40px
itemWidth: 15, // 图例项宽度为15px
itemHeight: 10, // 图例项高度为10px
itemGap: 25, // 图例项间隔为25px
borderRadius: 4, // 图例项圆角为4px
textStyle: {
color: '#000', // 图例文本颜色为黑色
fontFamily: 'Alibaba PuHuiTi', // 图例文本字体为"Alibaba PuHuiTi"
fontSize: 14, // 图例文本字体大小为14px
fontWeight: 400, // 图例文本字体粗细为400
},
},
// 设置饼图系列配置
series: [
{
name: 'Access From', // 系列名称
type: 'pie', // 系列类型为饼图
radius: '50%', // 饼图半径为整个容器的50%
center: ['50%', '50%'], // 饼图中心位置为容器的中心
// 饼图数据项配置
data: [
{ value: 4, name: '待办的', color: '#fe8019' },
{ value: 1, name: '已确定', color: '#fec429' },
{ value: 1, name: '修复中', color: '#4a90e2' },
{ value: 1, name: '已完成', color: '#9095a7' },
{ value: 1, name: '已验收', color: '#4cb051' },
{ value: 1, name: '已取消', color: '#ec0019' },
],
emphasis: {
itemStyle: {
shadowBlur: 0,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0)',
},
},
// 饼图数据项样式配置
itemStyle: {
borderRadius: 8, // 扇区圆角为8px
borderWidth: 2, // 扇区边框宽度为2px
borderColor: '#fff', // 扇区边框颜色为白色
// 设置每个扇区的颜色
color: function (params) {
return params.data.color; // 根据数据项中的color属性设置颜色
},
},
},
],
};