vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解

更新時(shí)間：2023年11月17日 14:01:50 作者：code_Bo

這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù),文中的示例講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

echarts 中有一個(gè)圖形叫動(dòng)態(tài)數(shù)據(jù)+時(shí)間坐標(biāo)軸，這個(gè)一般用于我們圖形數(shù)據(jù)較多，或需要左側(cè)平移動(dòng)態(tài)展示折線圖或者其他圖形的情況，但是使用這個(gè)的時(shí)候，一般數(shù)據(jù)沒(méi)問(wèn)題，如果碰上我這種同一個(gè)x軸上，有兩個(gè)值的情況就比較麻煩。下面分享一下。

官方案例： echarts.apache.org/examples/zh/editor.html

場(chǎng)景

我們的場(chǎng)景就是同樣有一批數(shù)據(jù)，需要不斷的左移顯示， x 軸顯示站點(diǎn)， y軸顯示我這個(gè)站的壓力值，正常來(lái)說(shuō)我一個(gè)站有兩個(gè)壓力值，但是經(jīng)常會(huì)有這兩個(gè)值相同的情況，相同的時(shí)候，就顯示一個(gè)點(diǎn)，不相同的時(shí)候，就在同一個(gè) x 軸上顯示兩個(gè)點(diǎn)。官方給我們的代碼是使用定時(shí)器輪詢(xún)，來(lái)更新數(shù)據(jù)

但是官方的代碼不是循環(huán)的，他這個(gè)更新你看到了 shift 刪除了第一項(xiàng)，這個(gè)第一項(xiàng)就沒(méi)了，而我的需求是像輪播圖一樣，要循環(huán)數(shù)據(jù)，也就是刪除的第一項(xiàng)要插回到數(shù)據(jù)的最后一條去。

數(shù)據(jù)

我覺(jué)得這里應(yīng)該先給大家展示數(shù)據(jù)，然后根據(jù)數(shù)據(jù)再展開(kāi)就方便理解了。

         allData: [
        {
          showx: '節(jié)點(diǎn)1',
          showy: 7.40019,
          value: ['節(jié)點(diǎn)1', 7.40019],
          source: {
            stationName: '節(jié)點(diǎn)1',
            pressureIn: 7.40019,
            pressureOut: 7.40019,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)2',
          showy: 4.673716,
          value: ['節(jié)點(diǎn)2', 4.673716],
          source: {
            stationName: '節(jié)點(diǎn)2',
            pressureIn: 4.673716,
            pressureOut: 7.477946,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)2',
          showy: 7.477946,
          value: ['節(jié)點(diǎn)2', 7.477946],
          source: {
            stationName: '節(jié)點(diǎn)2',
            pressureIn: 4.673716,
            pressureOut: 7.477946,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)3',
          showy: 6.699683,
          value: ['節(jié)點(diǎn)3', 6.699683],
          source: {
            stationName: '節(jié)點(diǎn)3',
            pressureIn: 6.699683,
            pressureOut: 7.928933,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)3',
          showy: 7.928933,
          value: ['節(jié)點(diǎn)3', 7.928933],
          source: {
            stationName: '節(jié)點(diǎn)3',
            pressureIn: 6.699683,
            pressureOut: 7.928933,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)4',
          showy: 10,
          value: ['節(jié)點(diǎn)4', 10],
          source: {
            stationName: '節(jié)點(diǎn)4',
            pressureIn: 10,
            pressureOut: 10,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)5',
          showy: 7.514252,
          value: ['節(jié)點(diǎn)5', 7.514252],
          source: {
            stationName: '節(jié)點(diǎn)5',
            pressureIn: 7.514252,
            pressureOut: 7.514252,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)8',
          showy: 8.152734,
          value: ['節(jié)點(diǎn)8', 8.152734],
          source: {
            stationName: '節(jié)點(diǎn)8',
            pressureIn: 8.152734,
            pressureOut: 8.152734,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)9',
          showy: 7.925224,
          value: ['節(jié)點(diǎn)9', 7.925224],
          source: {
            stationName: '節(jié)點(diǎn)9',
            pressureIn: 7.925224,
            pressureOut: 8.410707,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)9',
          showy: 8.410707,
          value: ['節(jié)點(diǎn)9', 8.410707],
          source: {
            stationName: '節(jié)點(diǎn)9',
            pressureIn: 7.925224,
            pressureOut: 8.410707,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)11',
          showy: 7.309628,
          value: ['節(jié)點(diǎn)11', 7.309628],
          source: {
            stationName: '節(jié)點(diǎn)11',
            pressureIn: 7.309628,
            pressureOut: 7.309628,
            same: true,
          },
        },
      ]

上面就是我的數(shù)據(jù)，實(shí)際上這個(gè)數(shù)據(jù)已經(jīng)經(jīng)過(guò)我的改造了，那么正常來(lái)講官方示例當(dāng)中，是不會(huì)出現(xiàn)我這里面比如節(jié)點(diǎn)3這種重復(fù)節(jié)點(diǎn)的情況，這時(shí)候往左側(cè)平移是一點(diǎn)問(wèn)題沒(méi)有的，但如果我這個(gè)里面有重復(fù)的節(jié)點(diǎn)，而我使用正常左移1個(gè)，然后再把左移這個(gè)插回到數(shù)組最后一個(gè)會(huì)怎么樣？會(huì)這樣：

大家可以看到，當(dāng)我滾動(dòng)到有兩個(gè)重復(fù)節(jié)點(diǎn)的時(shí)候，左側(cè)會(huì)出現(xiàn)一個(gè)空位，而我的需求是需要再 x 軸上顯示一個(gè)節(jié)點(diǎn)，兩個(gè)值，這兩個(gè)值在一條x軸上，方便看到變化。出現(xiàn)這個(gè)問(wèn)題的原因就是我移動(dòng)了一個(gè)節(jié)點(diǎn)，但這兩個(gè)節(jié)點(diǎn)實(shí)際上是顯示在一條x軸上的，移走了一個(gè)，只剩下另一個(gè)，就不能夠正常顯示。所以我移動(dòng)節(jié)點(diǎn)的時(shí)候，應(yīng)該判斷左移出去的節(jié)點(diǎn)是否是重復(fù)節(jié)點(diǎn)，如果是，應(yīng)該兩個(gè)都刪除，然后插入到我數(shù)組的后面。

這里還有一個(gè)注意點(diǎn)，就是我們需要使用兩個(gè)數(shù)據(jù)來(lái)管理狀態(tài)，因?yàn)椴幌窆俜降?demo，我這里要對(duì)數(shù)組刪除以后，還要插入，需要找到指定的數(shù)據(jù)，所以一個(gè)數(shù)組存儲(chǔ)不變狀態(tài)，我們從這里拿指定的數(shù)據(jù)，另一個(gè)數(shù)組用來(lái)展示，這個(gè)數(shù)組可以刪除，更改。同時(shí)需要一個(gè) index，來(lái)記錄我們每次拿取數(shù)據(jù)的指針。

最終效果

代碼

以下是我的完整代碼，可以直接使用，看到效果，關(guān)鍵邏輯也有注釋?zhuān)?然后有疑問(wèn)的地方，大家可以留言，一起討論~ pipelinePressureData 這里面的邏輯大家可以不用看，這是我用來(lái)轉(zhuǎn)換數(shù)據(jù)用的。

<template>
  <div>
    <div id="demo-main"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props:{
    pipelinePressureData:{
      type: Array,
      default: () => []
    }
  },
  name: 'PipelinePressureChart',
  data(){
    return {
          showData:[ ],
          lastIndex: 0,
          timeID: 0,
          allData: [
        {
          showx: '節(jié)點(diǎn)1',
          showy: 7.40019,
          value: ['節(jié)點(diǎn)1', 7.40019],
          source: {
            stationName: '節(jié)點(diǎn)1',
            pressureIn: 7.40019,
            pressureOut: 7.40019,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)2',
          showy: 4.673716,
          value: ['節(jié)點(diǎn)2', 4.673716],
          source: {
            stationName: '節(jié)點(diǎn)2',
            pressureIn: 4.673716,
            pressureOut: 7.477946,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)2',
          showy: 7.477946,
          value: ['節(jié)點(diǎn)2', 7.477946],
          source: {
            stationName: '節(jié)點(diǎn)2',
            pressureIn: 4.673716,
            pressureOut: 7.477946,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)3',
          showy: 6.699683,
          value: ['節(jié)點(diǎn)3', 6.699683],
          source: {
            stationName: '節(jié)點(diǎn)3',
            pressureIn: 6.699683,
            pressureOut: 7.928933,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)3',
          showy: 7.928933,
          value: ['節(jié)點(diǎn)3', 7.928933],
          source: {
            stationName: '節(jié)點(diǎn)3',
            pressureIn: 6.699683,
            pressureOut: 7.928933,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)4',
          showy: 10,
          value: ['節(jié)點(diǎn)4', 10],
          source: {
            stationName: '節(jié)點(diǎn)4',
            pressureIn: 10,
            pressureOut: 10,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)5',
          showy: 7.514252,
          value: ['節(jié)點(diǎn)5', 7.514252],
          source: {
            stationName: '節(jié)點(diǎn)5',
            pressureIn: 7.514252,
            pressureOut: 7.514252,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)8',
          showy: 8.152734,
          value: ['節(jié)點(diǎn)8', 8.152734],
          source: {
            stationName: '節(jié)點(diǎn)8',
            pressureIn: 8.152734,
            pressureOut: 8.152734,
            same: true,
          },
        },
        {
          showx: '節(jié)點(diǎn)9',
          showy: 7.925224,
          value: ['節(jié)點(diǎn)9', 7.925224],
          source: {
            stationName: '節(jié)點(diǎn)9',
            pressureIn: 7.925224,
            pressureOut: 8.410707,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)9',
          showy: 8.410707,
          value: ['節(jié)點(diǎn)9', 8.410707],
          source: {
            stationName: '節(jié)點(diǎn)9',
            pressureIn: 7.925224,
            pressureOut: 8.410707,
            same: false,
            type: 'pressureOut',
          },
        },
        {
          showx: '節(jié)點(diǎn)11',
          showy: 7.309628,
          value: ['節(jié)點(diǎn)11', 7.309628],
          source: {
            stationName: '節(jié)點(diǎn)11',
            pressureIn: 7.309628,
            pressureOut: 7.309628,
            same: true,
          },
        },
      ]
    }
  },
  mounted(){
  },
  beforeDestroy(){
    clearInterval(this.timeID)
  },
  watch:{
    pipelinePressureData:{
      deep: true,
      immediate: true,
      handler(val){
        if(val?.length === 0 ) return
        const res = val.reduce((prev,item)=>{
          const { pressureIn, pressureOut, stationName} = item
          if(pressureIn === pressureOut){
            prev.push({
              showx: stationName,
              showy: pressureIn,
              value: [stationName,pressureIn],
              source: Object.assign(item, { same: true }) 
            })
          }else{
            prev.push({
              showx: stationName,
              showy: pressureIn,
              value: [stationName,pressureIn],
              source:  Object.assign(item, { same: false, type: 'pressureIn' }) 
            })
            prev.push({
              showx: stationName,
              showy: pressureOut,
              value: [stationName,pressureOut],
              source: Object.assign(item, { same: false, type: 'pressureOut' }) 
            })
          }
          return prev
        },[])
        // this.allData = res
        console.log('res',res);
        this.$nextTick(()=>{
          this.init()
        })
      }
    }
  },
  methods: {
    init(){
      var chartDom = document.getElementById('demo-main');
      var myChart = echarts.init(chartDom, 'dark', {
        useDirtyRect: true
      });
      var option;
      const allIndxe = this.allData.length
      const bool = allIndxe > 6
      if(bool){
        this.showData = this.allData.slice(0,6)
        this.lastIndex = 5
      }else{
        this.showData = this.allData
      }
      option = {
        grid: {
          left: '2%',  // 如果需要，可以調(diào)整左邊距
          right: '1%', // 如果需要，可以調(diào)整右邊距
          bottom: '3%', // 增加底部邊距以容納更多的 X 軸標(biāo)簽
          containLabel: true // 確保標(biāo)簽被容納在圖表區(qū)域內(nèi)
        },
        title: {
          text: '測(cè)試數(shù)據(jù)'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0];
            const { data: { source } } = params
            const { same, stationName, type, pressureIn, pressureOut } = source
            return `<div>場(chǎng)站${stationName}</div><div>進(jìn)壓力${pressureIn}</div><div>出壓力${pressureOut}</div>` 
          }, 
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'category',
          name: '名稱(chēng)',
          splitLine: {
            show: false
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            formatter: (value) => {
              return value === "" ? '\n' : value
            }
          },
          axisLabel: {
            interval: 0, // 強(qiáng)制顯示所有標(biāo)簽
            rotate: 45, // 如果需要，可以設(shè)置標(biāo)簽旋轉(zhuǎn)角度以避免重疊
            textStyle: {
              fontSize: 10 // 如果需要，可以適當(dāng)調(diào)整字體大小
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            showSymbol: false,
            data: this.showData
          }
        ]
      };
      if(bool){
        this.timeID = setInterval(()=>{
          this.lastIndex++ 
          if(this.lastIndex === allIndxe){
            this.lastIndex = 0
          }
          this.showData.shift()
          this.showData.push(this.allData[this.lastIndex])
          if(this.showData[0].showx === this.showData[1].showx){
            this.lastIndex++ 
            if(this.lastIndex === allIndxe){
              this.lastIndex = 0
            }
            this.showData.shift()
            this.showData.push(this.allData[this.lastIndex])
          }
          myChart.setOption({
            xAxis: {
              // data: this.showData.map(item=>item.showx)
              data: this.showData.reduce((prev, item, index, arr) => {
                const { showx } = item;
                // 排除空字符串，只添加非空的標(biāo)簽
                if (showx !== '') {
                  // 判斷當(dāng)前標(biāo)簽與下一個(gè)標(biāo)簽是否相同，相同則不添加
                  if (showx !== arr[index + 1]?.showx) {
                    prev.push(showx);
                  }
                }
                return prev;
              }, []),
            },
            series: [
              {
                data: this.showData
              }
            ]
          })
        },2000)
      }
      option && myChart.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
#demo-main{
  border: 1px solid #333;
  width: 500px;
  height: 300px
}
</style>

以上就是vue使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue echarts動(dòng)態(tài)數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: