1. 程式人生 > >echarts圖表在Vue中雙縱軸刻度不齊

echarts圖表在Vue中雙縱軸刻度不齊

我們一般都是用的動態資料,ecarts在處理縱軸數值的時候,所以在處理這些資料時會"友好"的將縱軸分段便於分析。然而在多縱軸中容易引起麻煩,因為兩個的資料差異較大,導致縱軸分段數不易很難看,即使設定了splitNum,它也會在它認為好的情況下,自顧自的進行分段。

那沒辦法了,我只能把它寫死固定分段數,我選擇固定5段,因為能整除,不能整除的情況我沒有試,有人試了可以來分享一下。

首先我們需要固定最大和最小值,最小值一般是0,具體需求也可以變動,那我們就需要一個函式求值。

// data1是後端傳的資料陣列,展開取最大值,轉為字串,再展開取第一位數字,這樣來對最大值向上取整
let maxArr1 =[...Math.max(...data1).toString()];
 
//最大位加以,乘上10的位數減一 次冪,比如3243,取得第一位 "3" ,轉為數字3,加一,為4,再成10^(4-1),就取到4000,來做縱軸最大值,避免直接取dataMax,使最大那條資料一柱擎天,不好看                
let num1 = (Number(maxArr1[0])+1)* Math.pow(10,maxArr1.length-1);

//第二個縱座標軸                  
let maxArr2 =[...Math.max(...data2).toString()];// data2是後端傳的資料陣列
                  
let num2 = (Number(maxArr2[0])+1)*Math.pow(10,maxArr2.length-1);// 同樣操作
                 
this.option.yAxis[0].interval =num1/5;// 間隔為5份
                  
this.option.yAxis[0].max = num1; // 賦值最大值
                  
this.option.yAxis[1].interval =num2/5; // 間隔為5份
                  
this.option.yAxis[1].max = num2;// 賦值最大值

其中還遇到的問題,就是從網上查的,都是在options前設定的max,和interval,而在vue中我們的max依賴於後臺傳的資料,所以無法在data的return前定義,那怎麼不再return前請求這個資料的,因為請求需要傳的引數要從data中拿啊,在return前拿不到return中的資料我也很無奈。 

data(){
// 在這裡可以定義一些全域性變數,option可以直接使用,也可以通過this.資料看來獲取return的資料,但不能拿到computed的資料,反正我是沒拿到
return{
option8 : {
         
          grid: {
            left:50,
            right:10,
            top:'20%',
            height:'50%'
          },
          legend: {
           
          },
          xAxis: {
            data: [] ,
            silent: false,
            splitLine: {show: false},
            splitArea: {show: false},
            axisTick: {
              alignWithLabel: true 
            },
            axisLine: {
              onZero: true,
              lineStyle:{
                color:'#16707a'
              }
            },
            axisLabel:{
              // interval: 0,
              color:'#009aa1',
              margin: 15,
            },
          },
          yAxis: [
            {
              type:'value',
              name:'氣溫',
              max:null,
              min:0,
              interval:null,
              nameTextStyle:{
                color:'red'
              },
              axisLabel:{
                color:'blue',
                margin:15,
              },
              axisLine: {
                onZero: true,
                lineStyle:{
                  color:'green'
                }
              },
              splitLine:{
                lineStyle:{
                  color:'rgba(34,152,158,0.3)',
                  type:'dotted'
                }
              }
            },
            {
              type:'value',
              name:'水量',
              max:null,
              min:0,
              interval:null,
              nameTextStyle:{
                color:'yellow'
              },
              axisLabel:{
                color:'pink',
                margin:15,
              },
              axisLine: {
                onZero: true,
                lineStyle:{
                  color:'purple'
                }
              },
              splitLine:{
                show:false
              }
            },
          ],
          series: [
            {
              name:'氣溫',
              type:'bar',
              data:[],
            },
            {
              name:'水量',
              type:'line',
              yAxisIndex: 1,
              data:[]
            }
          ],
          tooltip:{}
        },

}
}

於是就直接在需要設定的時候直接設定,注意先拿到後臺資料在設定。

歡迎指正錯誤