javascript
const categories = ["ZSZQ-1标", "ZSZQ-2标", "ZSZQ-3标", "ZSZQ-4标"] ;
const xuan = [60, 54, 96, 35];
const pei = [74, 63, 54, 43];
const kao = [64, 53, 74, 23];
option = {
backgroundColor: '#0C1E49',
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
legend: {
data: ["选(右轴)", "培", "考"],
top: 6,
right: 10,
textStyle: { color: "#CFE2FF" },
},
grid: {
left: "3%",
right: "5%",
bottom: "10%",
top: "18%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: categories,
axisTick: { show: false },
axisLine: { lineStyle: { color: "#7FA7D8" } },
axisLabel: { color: "#CFE2FF" },
},
],
yAxis: [
{
type: "value",
min: 0,
axisTick: {
show: true //隐藏X轴刻度
},
// 左轴根据数据自适应刻度，不设固定满刻度
splitLine: { show: false },
axisLine: {
lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
},
axisLabel: { color: "#CFE2FF" },
},
{
type: "value",
min: 0,
max: 100,
axisTick: {
show: true //隐藏X轴刻度
},
splitLine: { show: false },
axisLine: {
lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
},
axisLabel: {
color: "#CFE2FF",
formatter: (val) => `${val}%`,
},
},
],
series: [
{
name: "培",
type: "bar",
barWidth: 20,
itemStyle: { color: "#29F19C", barBorderRadius: [5,5, 0, 0], },
data: pei,
z: 1,
},
{
name: "考",
type: "bar",
barWidth: 20,
itemStyle: { color: "#F3BA61", barBorderRadius: [5,5, 0, 0], },
data: kao,
z: 1,
},
{
name: "选(右轴)",
type: "bar",
yAxisIndex: 1,
barWidth: 20,
itemStyle: { color: "#6DA5FF" ,
// barBorderRadius: [10,10, 0, 0],
},
showBackground: true,
backgroundStyle: {
color: "rgba(255,255,255,0.15)",
},
data: xuan,
z: 1,
},
],
};const categories = ["ZSZQ-1标", "ZSZQ-2标", "ZSZQ-3标", "ZSZQ-4标"] ;
const xuan = [60, 54, 96, 35];
const pei = [74, 63, 54, 43];
const kao = [64, 53, 74, 23];
option = {
backgroundColor: '#0C1E49',
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
legend: {
data: ["选(右轴)", "培", "考"],
top: 6,
right: 10,
textStyle: { color: "#CFE2FF" },
},
grid: {
left: "3%",
right: "5%",
bottom: "10%",
top: "18%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: categories,
axisTick: { show: false },
axisLine: { lineStyle: { color: "#7FA7D8" } },
axisLabel: { color: "#CFE2FF" },
},
],
yAxis: [
{
type: "value",
min: 0,
axisTick: {
show: true //隐藏X轴刻度
},
// 左轴根据数据自适应刻度，不设固定满刻度
splitLine: { show: false },
axisLine: {
lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
},
axisLabel: { color: "#CFE2FF" },
},
{
type: "value",
min: 0,
max: 100,
axisTick: {
show: true //隐藏X轴刻度
},
splitLine: { show: false },
axisLine: {
lineStyle: { color: "#7FA7D8" }, show: true, //隐藏X轴轴线
},
axisLabel: {
color: "#CFE2FF",
formatter: (val) => `${val}%`,
},
},
],
series: [
{
name: "培",
type: "bar",
barWidth: 20,
itemStyle: { color: "#29F19C", barBorderRadius: [5,5, 0, 0], },
data: pei,
z: 1,
},
{
name: "考",
type: "bar",
barWidth: 20,
itemStyle: { color: "#F3BA61", barBorderRadius: [5,5, 0, 0], },
data: kao,
z: 1,
},
{
name: "选(右轴)",
type: "bar",
yAxisIndex: 1,
barWidth: 20,
itemStyle: { color: "#6DA5FF" ,
// barBorderRadius: [10,10, 0, 0],
},
showBackground: true,
backgroundStyle: {
color: "rgba(255,255,255,0.15)",
},
data: xuan,
z: 1,
},
],
};