用Echarts来画 上下双Y轴,用到了2个grid
let option = {
grid: [
{
top: 20,
left: 50,
right: 40,
height: "30%",
},
{
top: 20,
left: 50,
right: 40,
height: "30%",
},
{
top: 80,
left: 50,
right: 40,
height: "20%",
},
],
xAxis: [
{
type: "category",
name: "日期",
nameGap: 200,
data: backYear(),
axisPointer: {
type: "shadow",
},
axisTick: {
alignWithLabel: true,
},
axisLabel: {
color: "#fff",
},
offset: 90,
},
{
show: false,
gridIndex: 1,
type: "category",
name: "日期",
data: backYear(),
},
{
show: false,
gridIndex: 2,
type: "category",
name: "日期",
data: backYear(),
},
],
yAxis: [
{
type: "value",
name: "入库",
nameGap: 200,
min: 0,
max: 12000,
interval: 4000,
axisTick: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
formatter: "{value}",
},
splitLine: {
show: false,
},
},
{
type: "value",
name: "temp",
nameGap: 200,
axisLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#fff",
},
},
axisTick: {
show: true,
},
splitLine: {
lineStyle: {
color: "#134ccc",
},
},
gridIndex: 1,
max: 3.0,
min: 0.0,
interval: 1,
position: "right",
},
{
type: "value",
name: "出库",
nameGap: 200,
min: 0,
max: 12000,
interval: 4000,
inverse: true,
gridIndex: 2,
axisTick: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
formatter: "{value}",
},
splitLine: {
show: false, // 不显示网格线
},
},
],
series: [
{
type: "bar",
color: "#42ffde",
label: {
show: true,
position: "top",
color: "#FFFFFF",
fontSize: 12,
},
barWidth: "30",
data: [11817, 8856, 11624, 7886, 10882, 10666, 10698, 11093, 11266, 9395, 0, 0],
},
{
type: "bar",
color: "#004cff",
xAxisIndex: 2,
yAxisIndex: 2,
label: {
show: true,
position: "bottom",
color: "#FFFFFF",
fontSize: 12,
},
barWidth: "30",
data: [10597, 8742, 13589, 10241, 14000, 14000, 14000, 14000, 14000, 11000, 0, 0],
},
{
type: "line",
gridIndex: 1,
name: "temp",
// color:'#fffe2a',
data: [1.16, 0.87, 1.14, 0.77, 1.07, 1.05, 1.05, 1.09, 1.1, 0.92, 0.0, 0.0],
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "#ff9e59",
},
label: {
show: true,
position: "top",
color: "#fffe2a",
fontSize: 12,
},
},
],
};