效果圖

如果大家想實現如下圖的效果那麼久繼續往下看吧，直接上動圖！

方法

因為專案需要展示的資料圖表比較多我選擇的是把每一張圖表封裝成一個元件來引用。
先上一個完整的程式碼，引用時注意在從獲取資料是要換成自己的資料庫以及要自己定義好你需要的物件加到你設定好的陣列中：

<template>
  <div>
    <div id="main" style="height:350px;width:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
 data() {
    return {
      ans:[],// dayX: [],// 當天的 X軸
      weekX: [],// 當週的 X軸
      monthX: [],// 當月的 X軸
      yearX: [],// 當年的 X軸
      timeX:[],//任意時間段的X軸
      dataY: [] // Y 軸
    }
  },created() {
    this.fetchData()
  },methods: {
//獲取資料庫中的資料
    fetchData() {
    this.axios({
          method: 'GET',url: 'http://localhost:8080/xxxx/xxxx' }).then(function(resp) {
          console.log("oxygen ===>",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].oxgnSaturation
            vm.ans.push(arr)

          }

        })
     },init(dataX,dataY) {
      this.myChart = echarts.init(document.getElementById('main')www.cppcns.com
 
)

      let option = {
        legend: {
          icon: 'stack',// data: ['當天','當月','當年'],data: ['當週','當年','所選時間段'],selectedMode: 'single',// 單選
          selected: {
            當週: true,當月: false,當年: false,所選時間段: false
          }
        },tooltip: {
          trigger: 'axis',axisPointer: {
            type: 'cross'
          },//自定義顯示標籤
          formatter:function(params) {
            return params[0].name + '<br>血氧 : '+params[0].data+' %'
          }
        },// 工具欄
        toolbox: {
          feature: {
            saveAsImage: {} //可對摺線圖進行截圖儲存
          }
        },grid: {
          left: 10,//元件距離容器左邊的距離
          right: 10,top: 30,bottom: 20,containLabel: true
        },dataZoom: [ //通過滑鼠控制折線圖的放大縮小
          {
            show: true,type: 'inside',filterMode: 'none',xAxisIndex: [0]

          },{
            show: true,www.cppcns.com
 
        type: 'inside',yAxisIndex: [0]

          }
        ],xAxis: {
          type: 'category',miniInterval: 3,boundaryGap: false,axisTick: {
            show: false
          },splitLine: {
            // X 軸分隔線樣式
            show: true,lineStyle: {
              color: ['#f3f0f0'],width: 1,type: 'solid'
            }
          },data: dataX
        },yAxis: [
          {
            name: "血氧趨勢圖",type: 'value',splitLine: {
              // Y 軸分隔線樣式
              show: true,lineStyle: {
                color: ['#f3f0f0'],type: 'solid'
              }
            }
          }
        ],series: dataY

      }
      
  		this.myChart.on('legendselectchanged',obj => {
        var options = this.myChart.getOption()
        //這裡是選擇切換什麼樣的x軸，那麼他會進行對Y值的切換
        if (obj.name == '當週'){
          options.xAxis[0].data = this.weekX
        }else if (obj.name == '當月'){
          optionswww.cppcns.com
 
.xAxis[0].data = this.monthX
        }else if (obj.name == '當年'){
          options.xAxis[0].data = this.yearX
        }else if (obj.name == '所選時間段'){
          options.xAxis[0].data = this.timeX
        }

        this.myChart.setOption(options,true)
      })

      // 使用剛指定的配置項和資料顯示圖表。
      this.myChart.setOption(option)

			
  },mounted() {

    setTimeout(() => {
      this.$nextTick(() => {

        this.monthX = (this.res.map(item => item.monthX)).filter(Boolean) //過濾掉undefined、NaN、null、空串
        this.weekX = (this.res.map(item => item.weekX)).filter(Boolean) //過濾掉undefined、NaN、null、空串
        this.yearX = (this.res.map(item => item.yearX)).filter(Boolean) //過濾掉undefined、NaN、null、空串
        this.timeX = (this.ans.map(item => item.timeX)).filter(Boolean) //過濾掉undefined、NaN、null、空串

        //對dataY進行賦值，如果這裡想一個X軸對應多個Y值那麼可以在加一個{}
        this.dataY.push({
          name: '當月',type: 'line',// 直線ss
          itemStyle: {
            normal: {
              color: '#2E2E2E',lineStyle: {
                color: '#2E2E2E',width: 2
              }
            }
          },data: this.res.map(item => item.monthY)
        })

        this.dataY.push({ //這邊就可以自定義一個折線顯示的方式和顏色
          name: '當週',itemStyle: {
            normal: {
              color: '#FF0000',lineStyle: {
                color: '#FF0000',data: this.res.map(item => item.weekY)
        })


        this.dataY.push({ //這邊就可以自定義一個折線顯示的方式和顏色
          name: lsuGDWQp'當年',//這個必須和lengen 那邊的保持一致才行 
          type: 'line',itemStyle: {
            normal: {
              color: '#0404B4',lineStyle: {
                color: '#0404B4',data: this.res.map(item => item.yearY)
        })

        this.dataY.push({ //lsuGDWQp這邊就可以自定義一個折線顯示的方式和顏色
          name: '所選時間段',itemStyle: {
            normal: {
              color: '#DF01D7',lineStyle: {
                color: '#DF01D7',data: this.ans.map(item => item.timeY)
        })

        this.init(this.weekX,this.dataY) //初始化的資料顯示
        window.onresize = this.myChart.resize //視窗大小圖示自適應
      })
    },1000)
  }
}
</script>

結束，完工

到此這篇關於Echarts 如何實現一張圖現切換不同的X軸的文章就介紹到這了,更多相關Echarts 實現一張圖現切換不同的X軸內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！