ジャバスクリプト - eCharts - 私は以下に添付の画像で見ることができるように、私は折れ線グラフを作成するために<a href="https://ecomfe.github.io/echarts-doc/public/en/index.html" rel="nofollow noreferrer">eCharts javascript plugin</a>を使用互いに

Question

....

は、y軸が互いに重なっている重複する複数のY軸。

は、そして、これは私が、私はy軸が互いに重複しないように

var colors = ['#5793f3', '#d14a61', '#675bba']; 

var option = { 
    title: { 
     text: 'Wi-Fi Users & Bandwidth Usage by Day & Month Summary' 
    }, 
    tooltip: { 
     trigger: 'axis', 
     formatter: function (params) { 
      params = params[0]; 
      var date = new Date(params.name); 
      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; 
     }, 
     axisPointer: { 
      animation: false 
     } 
    }, 
    grid: { 
     left: '20%', 
     top: '20%', 
     right: '16%' 
    }, 
    legend: { 
     data:['Wi-Fi Users','Bandwidth Usage'], 
     top:40 
    }, 
    xAxis: { 
     name: 'Hours\nDate: 23/11/2017', 
     type: 'value', 
     splitLine: { 
      show: false 
     }, 
     min:0, 
     max:24, 
     splitNumber: 24 
    }, 
    yAxis: [{ 
      type: 'value', 
      name: "Bandwidth\nUsage", 
      min: 0, 
      max: 50, 
      splitLine: { 
       show: false 
      }, 
      axisLine: { 
       lineStyle: { 
        color: colors[2], 
       } 
      }, 
      axisLabel: { 
       formatter: '{value} Mbps' 
      } 
     }, 
     { 
      type: 'value', 
      name: "Wi-Fi\nUsers", 
      min: 0, 
      max: 500, 
      position: 'left', 
      offset:90, 
      splitLine: { 
       show: false 
      }, 
      axisLine: { 
       lineStyle: { 
        color: colors[1], 
       } 
      }, 
     } 
    ], 
    series: [{ 
     name: 'Wi-Fi Users', 
     type: 'line', 
     showSymbol: false, 
     hoverAnimation: true, 
     yAxisIndex: 1, 
     data: [[0,50],[5,30],[6.523,50],[12,100],[13,250],[15,200],[18,180]] 
    },{ 
     name: 'Bandwidth Usage', 
     type: 'line', 
     showSymbol: false, 
     hoverAnimation: true, 
     data: [[0,50],[5,30],[6,50],[12,100],[13,250],[15,200],[18,180]] 
    }] 
}; 

を使用するオプションです。赤いy軸は左にあるはずです。青いものは正しい位置にあります。スニペット

上

あなたは私のコードをテストしたい場合は

1. を開き、このサイトhttps://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
2. コピー私は
3. 貼り付けの上で共有し、私はノーに与えるリンクにテキストエリアにコードを置き換えコードを。1

Answer 1

私はちょうど

onZero: 0, 

を追加することによって、私の問題を解決しましたaxisLine

で

ので、y軸上のコードでは、

yAxis: [{ 
     type: 'value', 
     name: "Bandwidth\nUsage", 
     min: 0, 
     max: 50, 
     splitLine: { 
      show: false 
     }, 
     axisLine: { 
      lineStyle: { 
       color: colors[2], 
      } 
     }, 
     axisLabel: { 
      formatter: '{value} Mbps' 
     } 
    }, 
    { 
     type: 'value', 
     name: "Wi-Fi\nUsers", 
     min: 0, 
     max: 500, 
     position: 'left', 
     offset:90, 
     splitLine: { 
      show: false 
     }, 
     axisLine: { 
      lineStyle: { 
       color: colors[1], 
      }, 
      onZero: 0, //add this code 
     }, 
    } 
], 

でなければなりませんあなたは私があなたに考える彼らのwebsite https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis