echarts多坐标轴画 上下双Y轴

248 阅读1分钟

用Echarts来画 上下双Y轴,用到了2个grid 微信图片_20231109163349.png

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,
        },
      },
    ],
  };