let dataValue=[
{
value: 30,
name: '桥梁',
percent: 0.25,
color: 'rgba(248,95,94,1)',
radius: ['75%', '80%'],
center: ['22%', '50%'],
},
{
value: 15,
name: '隧道',
percent: 0.25,
color: 'rgba(243,185,71,1)',
radius: ['65%', '70%'],
center: ['22%', '50%'],
},
{
value: 18,
name: '路基',
percent: 0.25,
color: 'rgba(243,185,71,1)',
radius: ['55%', '60%'],
center: ['22%', '50%'],
},
{
value: 12,
name: '深路堑边坡',
percent: 0.25,
color: 'rgba(3,151,255,1)',
radius: ['45%', '50%'],
center: ['22%', '50%'],
},
{
value: 10,
name: '既有线',
percent: 0.25,
color: 'rgba(3,249,245,1)',
radius: ['35%', '40%'],
center: ['22%', '50%'],
},
]
let a = dataValue.map((t) => {
t.value = parseInt(t.value);
return t;
});
const sum = a.reduce((per, cur) => per + cur.value, 0);
const gap = (1 * sum) / 100;
const pieData1 = [];
const gapData = {
name: "",
value: gap,
itemStyle: {
color: "transparent",
},
};
let total = 0;
dataValue.forEach((item) => {
total += parseInt(item.value);
});
for (let i = 0; i < dataValue.length; i++) {
// 第一圈数据
// pieData1.push({
// ...this.dataValue[i],
// });
pieData1.push({
name: dataValue[i].name,
value: dataValue[i].value,
itemStyle: {
color: dataValue[i].color,
},
});
}
option = {
backgroundColor: "#031a40",
tooltip: {
confine: true,
textStyle: {
fontSize: 13, // 字体大小
},
},
legend: {
show: true,
// orient: "vertical",
bottom: "10%",
icon: "circle",
width: "75%",
// top: "middle",
itemWidth: 12,
itemHeight: 12,
itemGap: 18,
data: dataValue.map((item) => item.name),
textStyle: {
color: "#fff",
fontSize: 13,
letterSpacing: 10,
rich: {
a: {
fontSize: 14,
width: "auto",
marginLeft: 10,
padding: [0, 0, 0, 5],
// height: 30,
},
b: {
fontSize: 14,
width: 40,
padding: [0, 0, 0, 15],
color: "#fff",
},
},
},
formatter: (param) => {
var str = "";
console.log();
dataValue.forEach((item, index) => {
if (item.name == param) {
str = "{a|" + item.name + "}" + "{b|" + item.value + "}";
return;
}
});
return str;
},
},
// grid: {
// show: false,
// left: "0",
// right: "0",
// bottom: "1%",
// top: "0%",
// containLabel: true,
// },
// title: {
// //圆环中间内容
// text: "184",
// subtext: "类型总数",
// left: "21%",
// top: "43%",
// textStyle: {
// color: "#fff",
// fontSize: 20,
// align: "center",
// },
// subtextStyle: {
// fontSize: 15,
// fontWeight: "500",
// align: "center",
// color: "#fff",
// // marginTop: "-10px",
// },
// },
color: ["rgba(0,150,255,1)", "rgba(0,204,255,2)"],
series: [
{
name: "",
avoidLabelOverlap: true, //防止标签重叠
type: "pie",
radius: ["60%", "40%"], //大小
center: ["50%", "36%"], //位置
data: pieData1,
label: {
show: false,
formatter: function (params) {},
textStyle: {
fontSize: "18",
fontWeight: "bold",
color: "#fff",
},
},
emphasis: {
show: false,
},
},
{
type: "gauge",
zlevel: 1,
// z: 198,
splitNumber: 70,
radius: "39%",
center: ["50%", "36%"],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: true,
length: 6,
lineStyle: {
width: 3,
color: "rgba(108,173,202,1)",
},
},
data: [
{
value: 198,
name: "测已断面",
title: {
// 配置“家居总数”的样式
show: true,
fontSize: 18,
fontWeight: 700,
// fontFamily: fontFamily.fontFamily65W,
color: "rgba(128,255,255,1)",
offsetCenter: [0, "20%"],
},
},
],
detail: {
// 调节数字位置
offsetCenter: [-2, -17],
fontSize: 25,
fontWeight: 700,
// fontFamily: fontFamily.fontFamily95W,
color: "rgba(128,255,255,1)",
},
pointer: {
show: false,
},
// detail: {
// show: 0,
// },
},
],
};
