echart 制作 双Y轴线图

效果图

配置：

  chartOption: {
        color: ["#fb7549", "#4d91e0"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["温度", "湿度"],   //数组 方式
          textStyle: { color: "#fff" },
        },
        grid: {   //设置 上下左右间距
          top: "50",
          left: "10",
          right: "10",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {      //X 轴 配置
          axisLabel: {
            fontSize: 10,
            color: "#fff",
            showMinLabel: true,
            showMaxLabel: true,
          },
          axisLine: {
            lineStyle: { color: "#fff", width: 1 },
            lineStyle: {
              color: "#fff",              // X 轴颜色配置
            },
          },
          type: "category",
          boundaryGap: false,
          data: [date,date,date,date,date,date],
        },
        yAxis: [
          {
            type: "value",
            // name: '温度', 
            max: 40,
            min:-10,
            interval:10,
            axisLabel: {
              formatter: "{value} °C",
              color: "#fff",
            },
          },
          {
            type: "value",
            // name: '湿度',
            max: 100,
            min:0,
            interval:20,
            axisLabel: {
              formatter: "{value} % ",
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "温度",
            type: "line",
            symbol: "circle",   
            symbolSize: 6,
            itemStyle: {
              color: "#fd754b",
            },
            label: {
              show: true,
            },
            smooth: true,  // 是否光滑曲线
            data: [],
            yAxisIndex: 0,    //这个重点   0 是左边轴
          },
          {
            name: "湿度",
            type: "line",
            symbol: "circle",  //点样式
            symbolSize: 6,
            itemStyle: {
              color: "#5083FF",
            },
            label: {
              show: true,
            },
            smooth: true,
            data: [],
            yAxisIndex: 1, //这个重点   1是右边轴
          },
        ],
      },