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); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步