Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

<テンプレート>
  <div>
    <div id="main" style="height:350px;width:100%"></div>
  </div>
</テンプレート>
<スクリプト>
'echarts' から echarts をインポートします
エクスポートデフォルト{
 データ（） {
    戻る {
      回答:[],
      // dayX: [], // 日の X 軸 weekX: [], // 週の X 軸 monthX: [], // 月の X 軸 yearX: [], // 年の X 軸 timeX: [], // 任意の期間の X 軸 dataY: [] // Y 軸 }
  },
 作成された() {
    this.fetchData()
  },
  
メソッド: {
//データベース内のデータを取得する fetchData() {
    this.axios({
          メソッド: 'GET'、
          url: 'http://localhost:8080/xxxx/xxxx' }).then(function(resp) {
          console.log("酸素 ===>",resp.data)
          let num = resp.data.length //配列の長さを取得します for (let i = 0; i <num; i++) {
            //オブジェクトを作成する let arr = {}
            arr.timeX = resp.data[i].chkDate.slice(5, 10)
            arr.timeY = resp.data[i].oxgn飽和度
            vm.ans.push(arr)

          }

        })
     },
       init(データX, データY) {
      this.myChart = echarts.init(document.getElementById('main'))

      オプション = {
        伝説： {
          アイコン: 'スタック'、
          // データ: ['その日', 'その月', 'その年'],
          データ: ['今週'、'今月'、'今年'、'選択した期間']、
          selectedMode: 'single', // 単一選択 selected: {
            今週：本当、
            現在の月: false、
            現在の年: false、
            選択された期間: false
          }
        },
        ツールチップ: {
          トリガー: '軸'、
          軸ポインタ:
            タイプ: 'クロス'
          },
          //カスタム表示ラベルフォーマッタ:function(params) {
            params[0].name + '<br>血中酸素: '+params[0].data+' %' を返します
          }
        },
        // ツールバーツールボックス: {
          特徴：
            saveAsImage: {} //折れ線グラフのスクリーンショットを撮って保存できます。}
        },
        グリッド: {
          left: 10, //コンポーネントとコンテナの左側の間の距離 right: 10,
          トップ: 30,
          下: 20,
          ラベルを含む: true
        },

        dataZoom: [ // マウスを使用して折れ線グラフの拡大と縮小を制御します {
            表示: true、
            タイプ: 'inside'、
            フィルターモード: 'なし'、
            x軸インデックス: [0]

          },
          {
            表示: true、
            タイプ: 'inside'、
            フィルターモード: 'なし'、
            y軸インデックス: [0]

          }
        ]、
        x軸:
          タイプ: 'カテゴリ',
          ミニ間隔: 3,
          境界ギャップ: false、
          軸目盛り: {
            表示:偽
          },
          分割行: {
            // X軸の区切り線のスタイル show: true,
            線のスタイル:
              色: ['#f3f0f0'],
              幅: 1,
              タイプ: 'ソリッド'
            }
          },
          データ: データX
        },
        y軸: [
          {
            名前:「血中酸素トレンドチャート」、
            タイプ: '値',
            分割行: {
              // Y軸セパレータラインスタイル show: true,
              線のスタイル: {
                色: ['#f3f0f0'],
                幅: 1,
                タイプ: 'ソリッド'
              }
            }
          }
        ]、
        シリーズ: データY

      }
      
  		this.myChart.on('凡例選択が変更されました', obj => {
        var オプション = this.myChart.getOption()
        //ここで切り替えるX軸を選択し、Y値を切り替えます if (obj.name == 'this week'){
          options.xAxis[0].data = this.weekX
        }そうでない場合 (obj.name == '今月'){
          options.xAxis[0].data = this.monthX
        }そうでない場合 (obj.name == 'その年'){
          options.xAxis[0].data = this.yearX
        }else if (obj.name == '選択された期間'){
          options.xAxis[0].data = this.timeX
        }

        this.myChart.setOption(オプション、true)
      })

      // 指定した構成項目とデータを使用してグラフを表示します。
      this.myChart.setOption(オプション)

			
  },
    マウント() {

    タイムアウトを設定する(() => {
      this.$nextTick(() => {

        this.monthX = (this.res.map(item => item.monthX)).filter(Boolean) // 未定義、NaN、null、空の文字列を除外 this.weekX = (this.res.map(item => item.weekX)).filter(Boolean) // 未定義、NaN、null、空の文字列を除外 this.yearX = (this.res.map(item => item.yearX)).filter(Boolean) // 未定義、NaN、null、空の文字列を除外 this.timeX = (this.ans.map(item => item.timeX)).filter(Boolean) // 未定義、NaN、null、空の文字列を除外 // dataY に値を割り当てます。1 つの X 軸を複数の Y 値に対応させたい場合は、{} を追加できます。
        this.dataY.push({
          名前: '今月'、
          type: 'line', // 直線
          アイテムスタイル: {
            普通： {
              色: '#2E2E2E',
              線のスタイル:
                色: '#2E2E2E',
                幅: 2
              }
            }
          },
          データ: this.res.map(item => item.monthY)
        })

        this.dataY.push({ //ここで折れ線の表示方法と色をカスタマイズできます。名前: '今週'、
          タイプ: 'line'、
          アイテムスタイル: {
            普通： {
              色: '#FF0000',
              線のスタイル:
                色: '#FF0000',
                幅: 2
              }
            }
          },
          データ: this.res.map(item => item.weekY)
        })


        this.dataY.push({ //ここで折れ線の表示方法と色をカスタマイズできます name: '年', //これはlengenと一致している必要があります type: 'line',
          アイテムスタイル: {
            普通： {
              色: '#0404B4',
              線のスタイル: {
                色: '#0404B4',
                幅: 2
              }
            }
          },
          データ: this.res.map(item => item.yearY)
        })

        this.dataY.push({ //ここで折れ線の表示方法と色をカスタマイズできます。name: '選択された期間'、
          タイプ: 'line'、
          アイテムスタイル: {
            普通： {
              色: '#DF01D7',
              線のスタイル:
                色: '#DF01D7',
                幅: 2
              }
            }
          },
          データ: this.ans.map(item => item.timeY)
        })

        this.init(this.weekX, this.dataY) // データ表示を初期化 window.onresize = this.myChart.resize // ウィンドウサイズアイコンを適応 })
    }, 1000)
  }
}
</スクリプト>