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