echarts柱状図x軸オーバーフロー問題を巧みに解決する方法

問題のソース
ブロガーは最近,echartsを用いて柱状図を描く際に,x軸の左右にオーバーフローする問題に遭遇した.多くのパートナーもこのような問題に直面していると信じています.そして、最も重要なのはブロガーがネット上を探して、解決策が見つからなかったことです!!!くだらないことは言わないで、直接図を見て、明らかに柱状図x軸の左右の両側があふれていることを見ました.
What Happened?
コード解析
コードを一目見る:

//   echarts  
const mainChart = echarts.init(document.getElementById('main')); 
const series = [
        {
            data: [[0, 120], [1, 200], [2, 150], [3, 80], [4, 70], [5, 110], [6, 130]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        }];
const option = {
    xAxis: {
       type: 'value', //    
       boundaryGap: true //          
    },
    yAxis: {
        type: 'value' //    
    },
    series //     
};
mainChart.setOption(option); //      

配置は問題ないようですが、xAxisのboundaryGap属性値はtrueで、柱状図表示は問題ないでしょう.echarts githubで検索すると、似たようなissueが見えました.echartsのBugのようです.そこで、ブロガーは自分でechartsの構成項目を研究するしかなく、偶然興味深い属性onZeroを発見した.解析:現在、y軸はx軸の0目盛りに位置しており、x軸の内容が表示されないため、オーバーフローが範囲外になる.
思考検証
言い換えれば、x軸のminがseriesのdataの最小値よりも1つ小さいintervalを設定し、x軸のmaxがseriesのdataの最大値よりも1つ大きいintervalを設定し、yAxisのonZeroの値をfalseに設定すれば、内容を範囲内に表示することができるはずです.上記のように検証します.

const mainChart = echarts.init(document.getElementById('main'));
const series = [
        {
            data: [[0, 120], [1, 200], [2, 150], [3, 80], [4, 70], [5, 110], [6, 130]],
            type: 'bar', //    
            barWidth: 15 //       15，        
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 15
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 15
        }];
let xAxisMin = 0; // x    
let xAxisMax = 0; // x    
let xAxisMinInterval = 0; // x       
let xAxisMaxInterval = 0; // x       
let xValues = [];
//     x data 
for (let s of series) {
  for (let d of s.data) {
    if (!xValues.includes(d[0])) {
        xValues.push(d[0]);
    }
  }
}
xValues.sort((a ,b) => a - b); //     x data  
xAxisMinInterval = xValues[1] - xValues[0]; //       
xAxisMaxInterval = xValues[xValues.length - 1] - xValues[xValues.length - 2]; //       
xAxisMin = xValues[0] - xAxisMinInterval; // x    
xAxisMax = xValues[xValues.length - 1] + xAxisMaxInterval; // x    
const option = {
    xAxis: {
        type: 'value', //    
        min: xAxisMin,  // x    
        max: xAxisMax, // x    
        boundaryGap: true // x       
    },
    yAxis: {
        type: 'value',
        axisLine: {
            onZero: false // y    x 0   
        }
    },
    series
};
mainChart.setOption(option);

再レンダリングされた図を見てください.私たちの問題は完璧に解決され、柱状図は視覚領域に完全に表示されます.
もう一つのケース
もう一つの柱状図x軸オーバーフロー問題を見ると,x軸左側がオーバーフローしていることが明らかになった.コードを見ると、xAxis typeの値がcategory(クラス軸)であることが違います.

const mainChart = echarts.init(document.getElementById('main'));
const option = {
    xAxis: {
        type: 'category', //    
        data: [0, 1, 2, 3, 4, 5, 6],
        boundaryGap: false // x      
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 30
    }]
};
mainChart.setOption(option);

実は、ここではboundaryGap値を誤って設定し、boundaryGap値をtrueに変更すればよい.

xAxis: {
        type: 'category', //    
        data: [0, 1, 2, 3, 4, 5, 6],
        boundaryGap: true // x       
    }

さらにレンダリングされた柱状図を見て、OK、問題ありません.
結論
       1.echarts柱状図におけるx軸値がcategory(クラス軸)の場合、boundaryGap値はtrueに設定する必要があり、x軸左オーバーフローの問題を解決することができる.       2.echarts柱状図におけるx軸値がvalue(数値軸)である場合、x軸dataのminおよびmax値を算出し、xAxisのminおよびmax属性を設定し、最後にyAxisのonZero属性をfalseに設定することで、x軸両側オーバーフローの問題を解決することができる.       3.私たちが奇妙な問題に直面したとき、よく考えて、考えを変えてみると、通じる案を見つけることができます.
最后に、皆さんの子供の日の楽しみを祈って、好きなら文章にいいねをつけましょう.ありがとうございます.疑问があれば、文章の下に伝言を残してもいいです.
転載先:https://juejin.im/post/5cf1ed9c5188251179766c88