配置项如下
option = {
backgroundColor:'#222222',
grid: {
top: "15%",
bottom: "10%",
left: "18%",
right: "20%",
},
legend: {
type: "scroll",
itemGap: 30,
selectedMode: false,
icon: "pin",
data: ["发动机转速(rpm)", "发动机荷载率(%)"],
textStyle: {
color: "#FFFFFF",
rich: {
uname: {
width: 50,
},
unum: {
show: false,
color: "#4ed139",
},
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
xAxis: {
type: "category",
data: [
"2/18",
"2/19",
"2/20",
"2/21",
"2/22",
"2/23",
"2/24",
"2/25",
"2/26",
"2/27",
"2/28",
"2/29",
],
axisLabel: {
//坐标轴刻度标签的相关设置。
textStyle: {
color: "#fff",
fontStyle: "normal",
fontSize: 10,
},
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#1ED2FF",
opacity: 1
},
},
splitLine: {
lineStyle: { type: "dashed", color: "rgba(30, 210, 255,0.4)", width: 1 },
show: true,
},
},
yAxis: [
{
type: "value",
name: "发\n动\n机\n转\n速\n(rpm)",
axisTick: {
show: false,
},
axisLine: {
// 改变y轴颜色
lineStyle: {
color: "#1ED2FF",
},
},
axisLabel: {
// 改变y轴字体颜色和大小
// formatter: '{value} m³ ', // 给y轴添加单位
textStyle: {
color: "#fff",
fontSize: 10,
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(30, 210, 255,0.4)", //内容线
},
},
nameLocation: "left",
nameTextStyle: {
color: "#FFFFFF",
fontSize: 12,
padding: [200, 70, -30, 0],
},
},
{
type: "value",
name: "发\n动\n机\n荷\n载\n率\n(%)",
nameLocation: "right",
nameTextStyle: {
color: "#FFFFFF",
fontSize: 12,
padding: [20, 70, -30, 150],
},
position: "right",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#1ED2FF",
width: 1,
},
},
axisLabel: {
show: true,
formatter: "{value} %", //右侧Y轴文字显示
textStyle: {
color: "#fff",
fontSize: 10,
},
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "#1ED2FF", //内容线
},
},
},
],
color: ["#EAE018", " #13E2E1"],
series: [
{
name: "发动机转速(rpm)",
type: "line",
data: [1000, 2000, 3000, 4000, 5000, 5000, 3000, 2000, 1000, 2000, 3000, 4000],
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2,
color: "#EAE018",
shadowColor: " rgba(234, 224, 24, 0.7) ",
shadowBlur: 10,
shadowOffsetY: 0,
},
},
yAxisIndex: 0,
itemStyle: {
normal: {
color: "#EAE018",
borderWidth: 0,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#A9F387",
},
},
},
{
name: "发动机荷载率(%)",
type: "line",
data: [10, 20, 30, 40, 50, 40, 40, 30, 40, 50, 50, 20],
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
yAxisIndex: 1,
lineStyle: {
normal: {
width: 3,
color: "#13E2E1",
shadowColor: " rgba(19, 226, 225, 0.6) ",
shadowBlur: 10,
shadowOffsetY: 0,
},
},
itemStyle: {
normal: {
color: "#13E2E1",
borderWidth: 0,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
borderColor: "#A9F387",
},
},
},
],
};