Echart處理X軸顯示不全問題


 function loadchatFisheryChart(data) {
            var xAxisData = data.Select(function (t) { return t.Name; }).ToArray();
            var seriesData = data.Select(function (t) { return t.Yield; }).ToArray();
            var myChart = echarts.init(document.getElementById('chatFishery'));
            var option = {
                legend: {
                    data: ['產量']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b} : {c}噸",
                    axisPointer: {            // 坐標軸指示器,坐標軸觸發有效
                        type: 'shadow'        // 默認為直線,可選為:'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        interval: 0,
                        //rotate: 40  ,//斜體展示
                        formatter: function (value) {
                            var ret = "";//拼接加\n返回的類目項
                            var maxLength = 4;//每項顯示文字個數
                            var valLength = value.length;//X軸類目項的文字個數
                            var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
                            if (rowN > 1)//如果類目項的文字大於3,
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = "";//每次截取的字符串
                                    var start = i * maxLength;//開始截取的位置
                                    var end = start + maxLength;//結束截取的位置
                                    //這里也可以加一個是否是最后一行的判斷,但是不加也沒有影響,那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //拼接最終的字符串
                                }
                                return ret;
                            }
                            else {
                                return value;
                            }
                        }
                    }
                    
                },
               
                yAxis: {
                    type: 'value',
                    minInterval: 100, //設置成1保證坐標軸分割刻度顯示成整數。
                    name: '噸'
                },
                series: [{
                    name: '產量',
                    barMaxWidth: 30,//最大寬度
                    data: seriesData,
                    type: 'bar'
                }]
            };


            myChart.setOption(option);
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM