const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
option = {
//你的代码
backgroundColor: "#000000",
grid: {
left: "20",
right: "20",
bottom: "30",
containLabel: true,
},
tooltip: {
trigger: "axis",
formatter: '{b0}<br/>{a0}: {c0}<br/>{a2}: {c2}<br/>{a4}: {c4}'
},
legend: {
x: "right",
y: "top",
icon: "react",
padding: [22, 20, 20, 20],
itemWidth: 10, // 标志图形的长度
itemHeight: 10, // 标志图形的宽度
orient: "horizontal",
textStyle: {
color: "#fff"
},
data: [{
name: "预约人次", itemStyle: {
color: "#53D7D5"
}
}, {
itemStyle: {
opacity: 0,
}
}, {
name: "出勤人次", itemStyle: {
color: "#D77353"
}
}, {
itemStyle: {
opacity: 0
}
}, {
name: "出勤率（%）", itemStyle: {
color: "#F8B45F"
}
}],
},
xAxis: {
type: "category",
data: ['山东区', "河南区", "山西区", "河北区", "山东区"],
axisLine: {
lineStyle: {
color: "#464646",
width: 1,
type: "dotted",
},
},
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: "#fff", //坐标值得具体的颜色
fontSize: 14,
},
margin: 22,
},
},
yAxis: [
{
position: "left",
type: "value",
id: 0,
splitLine: {
// 分隔线
show: true, // 默认显示，属性show控制显示与否
// onGap: null,
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: ["#464646"],
width: 1,
type: "dotted",
},
},
axisLabel: {
textStyle: {
color: "#fff", //坐标值得具体的颜色
fontSize: 14,
},
},
axisLine: {
show: false,
},
},
{
position: "right",
type: "value",
id: 1,
min: 0,
max: 100,
splitLine: {
// 分隔线
show: false, // 默认显示，属性show控制显示与否
// onGap: null,
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: ["#464646"],
width: 1,
type: "dotted",
},
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#fff", //坐标值得具体的颜色
fontSize: 14,
},
formatter: "{value}%",
},
},
],
series: [
{
type: "bar",
name: "预约人次",
stack: "1",
barGap: 0,
barWidth: 30,
yAxisIndex: 0,
data: [84, 227, 92, 20, 400],
itemStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.01,
color: "rgba(83, 215, 213, 0.2)",
},
{
offset: 1,
color: "rgba(34, 34, 34, 0)", // 100% 处的颜色
},
],
},
},
},
{
stack: "1",
// name: "测试",
type: "bar",
data: [2, 2, 2, 2, 2],
itemStyle: {
normal: {
label: {
show: false
},
color: "#53D7D5",
},
},
},
{
type: "bar",
name: "出勤人次",
barGap: 0,
stack: "2",
barWidth: 30,
yAxisIndex: 0,
data: [120, 200, 150, 80, 70],
itemStyle: {
color: {
type: "linear",
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0.01,
color: "rgba(215, 115, 83, 0.2)",
},
{
offset: 1,
color: "rgba(34, 34, 34, 0)", // 100% 处的颜色
},
],
},
},
},
{
stack: "2",
type: "bar",
// name: "效率",
data: [2, 2, 2, 2, 2],
itemStyle: {
label: {
show: false
},
normal: {
color: "#D77353",
},
},
},
{
type: "line",
name: "出勤率（%）",
smooth: true, //加这个
yAxisIndex: 1,
data: [62, 22, 98, 80, 92],
itemStyle: {
normal: {
color: "#F8B45F",
lineStyle: {
color: "#F8B45F",
},
},
},
},
]
};