$(document).ready(function () { let dom = document.getElementById("sjsq1"); let myChart = echarts.init(dom); let app = {}; let option; $.post(ctx + "fzjc/sjsqJdsb",function (res){ option = { tooltip: { trigger: 'axis' }, legend: { data: ['季度上报数'], textStyle: { color: '#00cdef' } }, grid: { top: '15%', left: '5%', right: '5%', bottom: '5%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: res.names, axisLabel: { interval: 0, formatter:function(value) { let ret = "";//拼接加\n返回的类目项 let maxLength = 2;//每项显示文字个数 let valLength = value.length;//X轴类目项的文字个数 let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 if (rowN > 1)//如果类目项的文字大于3, { for (let i = 0; i < rowN; i++) { let temp = "";//每次截取的字符串 let start = i * maxLength;//开始截取的位置 let end = start + maxLength;//结束截取的位置 //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧 temp = value.substring(start, end) + "\n"; ret += temp; //凭借最终的字符串 } return ret; } else { return value; } }, color: '#00cdef' }, axisLine: { show: true, lineStyle: { color: '#00cdef' } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, color: '#00cdef' }, axisLine: { show: true, lineStyle: { color: '#00cdef' } }, splitLine: { show: true, lineStyle: { color: '#0b3747' } }, }, series: [ { name: '季度上报数', type: 'line', stack: 'Total', smooth: true, data: res.datas, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(55, 162, 255)' }, { offset: 1, color: 'rgb(116, 21, 219)' } ]) }, } ] }; if (option && typeof option === 'object') { myChart.setOption(option); myChart.on("click",function (params) { let prefix = ctx ; let url; /**环状图参数:1上报,2办结**/ switch (params.name) { case "第一季度" : url = prefix + "fzjc/goSjsqLine/1/1"; break; case "第二季度" : url = prefix + "fzjc/goSjsqLine/2/1"; break; case "第三季度" : url = prefix + "fzjc/goSjsqLine/3/1"; break; case "第四季度" : url = prefix + "fzjc/goSjsqLine/4/1"; break; } let btn = [' 关闭']; let options = { title: '季度上报统计', width: "1000", height: "550", url: url, btn: btn, callBack: doSubmit }; $.modal.openOptions(options); }); } function doSubmit(index, layero){ layer.close(index); } }); })