javascript-eCharts-多个y轴彼此重叠 [英] javascript - eCharts - multiple y-axis overlapping each other

问题描述

我使用

这是我使用的选项

  var colors = ['＃5793f3'，'＃d14a61'，'＃675bba']; 
 
 var选项= {
标题：{
文本：‘Wi-Fi用户和按天&的带宽使用情况月摘要 
}，
工具提示：{
触发器： axis，
 formatter：函数（参数）{
 params = params [0]; 
 var date = new Date（params.name）; 
返回date.getDate（）+’/’+（date.getMonth（）+ 1）+’/’+ date.getFullYear（）+’：’+ params.value [1]; 
}，
 axisPointer：{
动画：false 
} 
}，
网格：{
左： 20％，
顶部： 20％，
右边： 16％ 
}，
图例：{
 data：['Wi-Fi Users'，'Bandwidth Usage ']，
顶部：40 
}，
 xAxis：{
名称：'Hours\nDate：23/11/2017'，
类型：'value '，
 splitLine：{
 show：false 
}，
 min：0，
 max：24，
 splitNumber：24 
} ，
 yAxis：[{
类型：'value'，
名称： Bandwidth\nUsage，
 min：0，
 max：50，
 splitLine：{
 show：false 
}，
 axisLine：{
 lineStyle：{
 color：colors [2]，
} 
}，
 axisLabel：{
格式化程序： '{value} Mbps'
} 
}，
 {
类型：'value'，
名称： Wi-Fi\nUsers，
 min：0，
 max：500，
位置： left，
偏移量：90，
 splitLine：{
 show：false 
} ，
 axisLine：{
 lineStyle：{
 color：colors [1]，
} 
}，
} 
]，
系列：[{{
名称： Wi-Fi用户，
类型： line，
 showSymbol：false，
 hoverAnimation：true，
 yAxisIndex ：1，
数据：[[0,50]，[5,30]，[6.523,50]，[12,100]，[13,250]，[15,200]，[18,180]] 
}， {
名称：带宽使用情况，
类型：线，
 showSymbol：false，
 hoverAnimation：true，
数据：[[0,50] ，[5,30]，[6,50]，[12,100]，[13,250]，[15,200]，[18,180]] 
 }] 
}; 
  

因此，我不希望y轴彼此重叠。红色y轴应在左侧。蓝色的位置正确。

如果要在代码段上测试我的代码

1. 打开此网站
   
   

   I use eCharts javascript plugin to create a line chart ....

   As you can see in the picture I attached below, the y-axis is overlapping each other.

   And this is the option I use

   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]]
       }]
   };
   

   So, I don't want the y-axis to overlap each other. The red y-axis should be on the left. And the blue one is in correct position.

   If you want to test my code on snippet

   1. Open this site https://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
   2. Copy the code I shared above
   3. Paste and replace the code into the textarea in the link I give in No. 1

   解决方案

   I just solved my problem by adding

   onZero: 0,
   

   in axisLine

   so the code on y-axis should be

   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
           },
       }
   ],
   

   You can find more detail about the attribute on their website https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis

   这篇关于javascript-eCharts-多个y轴彼此重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！