echarts---双饼进度条，进度条
option = {
series: [
{
name: "",
type: "pie",
hoverAnimation: false, //鼠标移入变大
clockWise: false,
radius: ["45%", "55%"],
center: ["30%", "60%"],
label: {
fontSize: 14,
normal: {
formatter: "{b}\n",
padding: [0, -150],
color: "#fff",
},
position: "center",
},
labelLine: {
normal: {
length: 20, //第一条线
length2: 160,
lineStyle: {
width: 1, // 线条的宽度
color: "#fff", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
},
},
},
data: [
{
value: 100 - 65.38,
name: "",
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: "#222A44",
},
},
},
{
value: 65.38,
name: "服务工单完成率 65.38%",
itemStyle: {
normal: {
color: "#325BF1",
},
},
},
],
},
{
name: "",
type: "pie",
clockWise: false,
hoverAnimation: false, //鼠标移入变大
radius: ["35%", "25%"],
center: ["30%", "60%"],
label: {
fontSize: 14,
normal: {
formatter: "{b}\n",
padding: [0, -150],
color: "#fff",
},
position: "center",
},
labelLine: {
normal: {
length: 30, //第一条线
length2: 160,
lineStyle: {
width: 1, // 线条的宽度
color: "#fff", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
},
},
},
data: [
{
value: 100 - 31.15,
name: "",
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: "#362F2D",
},
},
},
{
value: 31.15,
name: "监控工单完成率 31.15%",
itemStyle: {
normal: {
color: "#FF9929",
},
},
},
],
},
],
}
option = {
// backgroundColor:"#17326b",
grid: {
left: "38",
top: "35",
right: "20",
bottom: "0",
containLabel: true,
},
xAxis: {
show: false,
},
yAxis: [
{
type: "category",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
// color: "#fff",
fontSize: 14,
padding: [0, 0, 0, 0],
textStyle: {
color: "#fff",
},
},
data: ["漏洞数量"],
inverse: true,
},
{
type: "category",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
// color: "black",
fontSize: 14,
textStyle: {
color: "#fff",
},
},
data: ["197"],
inverse: true,
},
],
series: [
{
type: "bar",
barWidth: 12,
data: ["40"],
barCategoryGap: 10,
itemStyle: {
normal: {
barBorderRadius: 10,
borderColor: "#ccc", // 设置边框颜色
borderWidth: 1, // 设置边框宽度
color: new echarts.graphic.LinearGradient(0.35, 0, 1, 1, [
{
offset: 0,
color: "#FF3329", //红色
},
{
offset: 0,
color: "#FF9929", //橙色
},
{
offset: 0.35,
color: "#FF9929", //橙色
},
{
offset: 0.35,
color: "#FFE329", //黄色
},
{
offset: 0.55,
color: "#FFE329", //黄色
},
{
offset: 0.55,
color: "#325BF1", //蓝色
},
{
offset: 1,
color: "#325BF1", //蓝色
},
]),
},
},
zlevel: 2,
},
{
type: "bar",
color: "transparent",
barGap: "-100%",
barWidth: 12,
data: [100],
itemStyle: {
normal: {
barBorderRadius: 10,
borderColor: "#ccc", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
},
},
},
],
}
option = {
grid: {
left: "10",
top: "10",
right: "20",
bottom: "10",
containLabel: true,
},
xAxis: {
show: false,
},
yAxis: [
{
type: "category",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
fontSize: 14,
padding: [0, 0, 0, 0],
textStyle: {
color: "#fff",
},
},
data: ["配置核查数量", "弱口令数量"],
inverse: true,
},
{
type: "category",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
// color: "black",
fontSize: 14,
textStyle: {
color: "#fff",
},
},
data: ['37', '75'],
inverse: true,
},
],
series: [
{
type: "bar",
barWidth: 12,
data: [100, 100],
barCategoryGap: 10,
itemStyle: {
normal: {
barBorderRadius: 10,
borderColor: "#ccc", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(39,144,253,0.1)",
},
{
offset: 1,
color: "#2790FD",
},
]),
},
},
zlevel: 1,
},
{
type: "bar",
color: "transparent",
// border:'1px solid #ccc',
barGap: "-100%",
barWidth: 12,
data: [100, 100, 100],
itemStyle: {
normal: {
barBorderRadius: 10,
borderColor: "#ccc", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
},
},
},
],
}