这个饼图嵌套水球图可以用吗?我放我代码里出不来,是哪里有问题吗
let normal = 193;
let loseC = 26;
let lateE = 88;
let checkL = 9;
let checkB = 18;
let differentD = 6;
let sum = normal + loseC + lateE + checkL + checkB + differentD;
let norP = sum ? ((normal * 100) / sum).toFixed(2) : 0;
let loginPer = sum ? ((normal * 100) / sum).toFixed(2) : 0;
let chartData = [
{ value: normal, name: '正常' },
{ value: loseC, name: '缺卡' },
{ value: lateE, name: '早退' },
{ value: checkL, name: '迟到' },
{ value: checkB, name: '补打卡' },
];
option = {
backgroundColor: '#ad9dcd',
legend: {
orient: 'vertical',
left: '5%',
top: '10%',
formatter(params) {
let str = '';
console.log('params', params);
chartData.forEach((key) => {
let per = key.value ? ((key.value * 100) / sum).toFixed(2) + '%' : 0;
if (key.name === params) {
str = key.name + ' ' + per;
} else if (params === '本月部门打卡成功率') {
str = params;
}
});
return str;
},
},
title: {
top: '45%',
left: 'center',
text: '',
textStyle: {
color: 'rgb(173, 157, 205)',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 14,
},
subtextStyle: {
color: 'rgb(173, 157, 205)',
fontSize: 20,
},
},
tooltip: {
trigger: 'item',
formatter: '部门打卡情况<br/>{b} {c} ({d}%)',
},
series: [
{
type: 'liquidFill',
itemStyle: {
normal: {
opacity: 0.4,
shadowBlur: 0,
shadowColor: 'blue',
},
},
name: chartData,
data: [
{
value: loginPer / 100,
itemStyle: {
normal: {
color: '#53d5ff',
opacity: 0.6,
},
},
},
],
color: ['#53d5ff'],
center: ['50%', '50%'],
label: {
normal: {
formatter: '',
textStyle: {
fontSize: 12,
},
},
},
outline: {
itemStyle: {
borderColor: '#86c5ff',
borderWidth: 0,
},
borderDistance: 0,
},
},
{
type: 'pie',
radius: ['45%', '60%'],
color: ['orange', '#dfd0e6', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
hoverAnimation: false, ////设置饼图默认的展开样式
label: {
show: false,
// normal: {
// formatter: "{b}\n{d}%",
// show: true,
// position: "",
// },
},
labelLine: {
normal: {
show: false,
},
},
itemStyle: {
// 此配置
normal: {
borderWidth: 2,
borderColor: '#fff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 2,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
data: chartData,
},
],
};
引用 皆我百晓生 小程序回复内容作答:
根据提供的代码,你尝试使用 ECharts 库创建一个饼图嵌套水球图。然而,需要注意的是,ECharts 目前并没有直接提供饼图嵌套水球图的类型。因此,你可能无法使用当前的代码段来实现该效果。
ECharts 提供了各种类型的图表,包括饼图和水球图,但目前没有将两者结合的特定类型。如果你的需求确实是要实现饼图嵌套水球图,你可能需要考虑其他图表库或自定义绘制方法。
请注意,我是一个文本AI助手,无法运行代码或查看实际效果。建议你查阅 ECharts 的官方文档和示例,以获取更多关于饼图和水球图配置的信息。同时,你也可以参考其他开源图表库以及网上的资源,看是否有现成的解决方案适用于你的需求。
装水球图包了吗?好像echarts3以上,把水球图分离了,需要单独安装echarts-liquidfill
包