【echarts】多条X轴 多条Y轴显示

echarts多条X轴 多条Y轴显示配置

const option = {
        grid: {
          left: '5%',
          right: '8%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          data: [
            { name: this.fragmentName, icon: 'line' },
            { name: this.lineName }
          ],
          right: 10
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: false,
              onZero: false
            },
            title: false,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: _this.xData
          },
          {
            type: 'category',
            boundaryGap: false,
            position: 'bottom',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false, // 不显示坐标轴线
              onZero: false
            },
            axisLabel: {
              showMaxLabel: true,
              textStyle: {
                color: '#8E8DA7' // 横坐标轴上文字颜色
              },
              fontSize: 10,
              margin: 10
            },
            data: _this.date
          }
        ],
        yAxis: [
          {
            name: this.fragmentName,
            type: 'value',
            nameTextStyle: {
              color: '#8E8DA7',
              fontSize: 10
            },
            axisLabel: {
              // formatter: '{value}',
              // 如果是多数据的话自定义Y轴，如果不是就正常显示
              formatter: !_this.isMultidata ? '{value}' : function(v, i) {
                // console.log('y轴刻度', v, i)
                if (i === 0) {
                  v = -0.10
                }
                if (i === 1) {
                  v = -0.05
                }
                if (i === 2) {
                  v = 1.00
                }
                if (i === 3) {
                  v = 1.05
                }
                if (i === 4) {
                  v = 1.10
                }
                return v
              },
              textStyle: {
                color: '#8E8DA7'
              },
              fontSize: 10,
              margin: 20
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true // 保证刻度线和标签对齐
            },
            splitLine: {
              show: true, // 显示网格线
              lineStyle: {
                color: 'rgba(142, 141, 167, 0.1)'
              }
            }
          },
          {
            name: this.lineName,
            alignTicks: true,
            type: 'value',
            nameTextStyle: {
              color: '#8E8DA7',
              fontSize: 10,
              textStyle: {
                color: '#8E8DA7'
              }
            },
            axisLabel: {
              // formatter: '{value}',
              // 如果是多数据的话自定义Y轴，如果不是就正常显示
              formatter: !_this.isMultidata ? '{value}' : function(v, i) {
                // console.log('y轴刻度', v, i)
                if (i === 0) {
                  v = -0.10
                }
                if (i === 1) {
                  v = -0.05
                }
                if (i === 2) {
                  v = 1.00
                }
                if (i === 3) {
                  v = 1.05
                }
                if (i === 4) {
                  v = 1.10
                }
                return v
              },
              textStyle: {
                color: '#8E8DA7'
              },
              fontSize: 10
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true // 保证刻度线和标签对齐
            },
            splitLine: {
              show: true, // 显示网格线
              lineStyle: {
                color: 'rgba(142, 141, 167, 0.1)'
              }
            }
          }
        ],
        series: [
          {
            name: this.fragmentName,
            type: 'line',
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: '#E6B37F', // 图例的颜色
                lineStyle: {
                  color: '#E6B37F'// 线的颜色
                }
              }
            },
            // prettier-ignore
            data: _this.fragmentData
          },
          {
            name: this.lineName,
            type: 'line',
            yAxisIndex: 1,
            symbol: 'emptyCircle',
            connectNulls: true,
            itemStyle: {
              normal: {
                color: '#4842F2', // 图例的颜色
                lineStyle: {
                  color: '#4842F2'// 线的颜色
                }
              }
            },
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: 'series'
            },
            // prettier-ignore
            data: _this.pointData
          }
        ]
      }