欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)現(xiàn)ECharts雙Y軸左右刻度線一致的例子

 更新時(shí)間:2020年05月16日 15:27:41   作者:毛公鼎  
這篇文章主要介紹了實(shí)現(xiàn)ECharts雙Y軸左右刻度線一致的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

不一致的情況如下圖:

修改成一致的情況如下圖:

代碼如下:

yAxis : [
          {
            type : 'value',
            name : '人數(shù)',
            //splitLine:{show:false},
            axisLabel : {
              formatter: '{value} 個(gè)',
              textStyle:{color: '#A23400'}//#A23400 purple
            },
            axisLine:{
               lineStyle:{color:'#A23400',width:'1'} //y軸坐標(biāo)軸顏色 #A23400 black
            }
          },
          {
            type : 'value',
            name : '人次',
            //splitLine:{show:false},
            axisLabel : {
              formatter: qfamtter,
              textStyle:{color: '#00AEAE'}//#00AEAE blue
            },
            axisLine:{
               lineStyle:{color:'#00AEAE',width:'1'} //y軸坐標(biāo)軸顏色 #00AEAE black
            },
            min: 0,
            max: Max2*2,
            splitNumber: 6,
            interval: (Max2*2 - 0) / 6
          }

其中需要加:

            min: 0,
            max: Max2*2,
            splitNumber: 6,
            interval: (Max2*2 - 0) / 6

左邊Y軸默認(rèn)了分成6段,所以要把右邊Y軸也分成6段。

附加:jquery 數(shù)組獲取最大值和最值的方法,僅供參考

//計(jì)算最大值
 function cal_Max(a) {
    //debugger
    a=$.grep(a,function(n,i){return i>0;});
    var maxval = Math.max.apply(null, a);
    return maxval;
   }
 
 //計(jì)算最小值
 function calMin(a) {
  a=$.grep(a,function(n,i){return i>0;});
  var minval = Math.min.apply(null, a)
  return minval;
 }

補(bǔ)充知識(shí):echarts 兩個(gè)y軸展示折線圖,并使兩個(gè)y軸刻度線重合

效果如圖:

y軸刻度不重合情況:

代碼如下,具體的數(shù)據(jù)處理就不再一一展示,只看畫圖部分:

  drawGraphChart() {
   // 具體的數(shù)據(jù)格式可以參考: https://echarts.baidu.com/examples/editor.html?c=multiple-y-axis
   // 處理兩個(gè)y軸的最大值 => 為使兩個(gè)y軸的標(biāo)度線完全重合
   // 拿到左右兩個(gè)y軸的最大數(shù)據(jù)之后 給他們分別取整成為最終 y軸上展示的值 也是為了能夠確保兩個(gè)值都能整除10
   const maxY1 = parseInt((Math.max(...maxData1) + 2000) / 1000) * 1000
   const maxY2 = parseInt((Math.max(...maxData2) + 10) / 10) * 10
   this.myChart = this.$echarts.init(document.getElementById('drawChart'))
   // var color = ['#d14a61', '#5793f3'], // 這個(gè)顏色和y軸的顏色對(duì)應(yīng),如果畫的曲線較少,可以直接用兩種顏色區(qū)分線是按照哪個(gè)坐標(biāo)軸的刻度畫的
   const option = {
    title: {
     left: 20,
     text: '趨勢(shì)圖'
    },
    xAxis: {
     type: 'category',
     // boundaryGap: false, // 數(shù)據(jù)完全填充x軸
     data: this.toRepeatTimeArr // x軸時(shí)間
    },
    legend: {
     type: 'scroll',
     right: 120,
     top: 0,
     left: '65%',
     bottom: 0,
     data: legendTankNum // 圖例
    },
    grid: {
     left: '6%',
     right: '6%',
     top: '14%'
    },
    tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'cross'
     }
    },
    yAxis: [
     {
      type: 'value',
      name: '體積',
      min: 0,
      max: maxY1, // 左側(cè)y軸最大值
      // 兩個(gè)y軸的刻度必須整除一個(gè)相同的數(shù)才能重合
      interval: Math.ceil(maxY1 / 10), // 間距等分為10等分 
      position: 'left', // y軸在左側(cè)
      // y軸的顏色和按y軸刻度畫的曲線的顏色
      // axisLine: {
      //  lineStyle: {
      //   color: color[0]
      //  }
      // },
      axisLabel: {
       formatter: '{value} L'
      }
     },
     {
      type: 'value',
      name: '溫度',
      min: 0,
      max: maxY2, // 右側(cè)y軸最大值
      interval: Math.ceil(maxY2 / 10), // 間距等分為10等分
      position: 'right', // y軸在右側(cè)
      // axisLine: {
      //  lineStyle: {
      //   color: color[1]
      //  }
      // },
      axisLabel: {
       formatter: '{value} °C'
      }
     }
    ],
    toolbox: {
     right: 80,
     top: -5,
     feature: {
      saveAsImage: {}
     }
    },
    // {name: '--',type: 'line',data:[0,0,0···]}
    series: allRealData
   }
   // true 圖數(shù)據(jù)不疊加
   this.myChart.setOption(option, true)
  }

以上這篇實(shí)現(xiàn)ECharts雙Y軸左右刻度線一致的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • python字典添加值的方法及實(shí)例代碼分享

    python字典添加值的方法及實(shí)例代碼分享

    在本篇文章里小編給大家整理的是一篇關(guān)于python字典添加值的方法及實(shí)例代碼講解,有興趣的朋友們可以學(xué)習(xí)下。
    2022-11-11
  • Python中的def __init__( )函數(shù)

    Python中的def __init__( )函數(shù)

    這篇文章主要介紹了Python中的def __init__( )函數(shù),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-09-09
  • 深入理解python?生成器、迭代器、動(dòng)態(tài)新增屬性及方法

    深入理解python?生成器、迭代器、動(dòng)態(tài)新增屬性及方法

    這篇文章主要介紹了python?生成器、迭代器、動(dòng)態(tài)新增屬性及方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • Python簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容抓取功能示例

    Python簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容抓取功能示例

    這篇文章主要介紹了Python簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容抓取功能,結(jié)合實(shí)例形式分析了Python基于urllib模塊的網(wǎng)頁(yè)請(qǐng)求、內(nèi)容讀取等相關(guān)操作技巧,需要的朋友可以參考下
    2018-06-06
  • 如何用Python從桌面讀取二維碼信息詳解

    如何用Python從桌面讀取二維碼信息詳解

    二維碼作為一種信息傳遞的工具,在當(dāng)今社會(huì)發(fā)揮了重要作用,下面這篇文章主要給大家介紹了關(guān)于如何用Python從桌面讀取二維碼信息的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-10-10
  • Python設(shè)計(jì)模式之中介模式簡(jiǎn)單示例

    Python設(shè)計(jì)模式之中介模式簡(jiǎn)單示例

    這篇文章主要介紹了Python設(shè)計(jì)模式之中介模式,簡(jiǎn)單介紹了中介模式的概念、功能,并結(jié)合實(shí)例形式給出了Python定義與使用中介模式的相關(guān)操作技巧,需要的朋友可以參考下
    2018-01-01
  • pytorch SENet實(shí)現(xiàn)案例

    pytorch SENet實(shí)現(xiàn)案例

    這篇文章主要介紹了pytorch SENet實(shí)現(xiàn)案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-06-06
  • Python3 安裝PyQt5及exe打包圖文教程

    Python3 安裝PyQt5及exe打包圖文教程

    今天小編就為大家分享一篇Python3 安裝PyQt5及exe打包圖文教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2019-01-01
  • python條件語(yǔ)句和while循環(huán)語(yǔ)句

    python條件語(yǔ)句和while循環(huán)語(yǔ)句

    這篇文章主要介紹了python條件語(yǔ)句和while循環(huán)語(yǔ)句,文章基于python的相關(guān)資料展開對(duì)其條件語(yǔ)句及while循環(huán)語(yǔ)句的詳細(xì)內(nèi)容介紹,需要的小伙伴可以參考一下
    2022-04-04
  • PyCharm關(guān)閉礙眼的波浪線圖文詳解

    PyCharm關(guān)閉礙眼的波浪線圖文詳解

    這篇文章主要介紹了PyCharm關(guān)閉礙眼的波浪線的實(shí)現(xiàn),本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-03-03

最新評(píng)論