1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Echarts异步数据加载</title> 8 <!-- 引入echarts --> 9 <script src="./echarts.min.js"></script> 10 </head> 11 <body> 12 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 13 <div id="main" style=" 600px;height:400px;"></div> 14 <script type="text/javascript"> 15 16 17 // 基于准备好的dom，初始化echarts实例 18 var myChart = echarts.init(document.getElementById('main')); 19 20 // 指定图表的配置项和数据 21 var option = { 22 title: { 23 text: 'ECharts 入门示例' 24 }, 25 tooltip: {}, 26 legend: { 27 data:['销量'] 28 }, 29 xAxis: { 30 axisLabel: {//坐标轴刻度标签的相关设置。 31 formatter : function(params){ 32 var newParamsName = "";// 最终拼接成的字符串 33 var paramsNameNumber = params.length;// 实际标签的个数 34 var provideNumber = 5;// 每行能显示的字的个数 35 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 36 /** 37 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签 38 */ 39 // 条件等同于rowNumber>1 40 if (paramsNameNumber > provideNumber) { 41 /** 循环每一行,p表示行 */ 42 for (var p = 0; p < rowNumber; p++) { 43 var tempStr = "";// 表示每一次截取的字符串 44 var start = p * provideNumber;// 开始截取的位置 45 var end = start + provideNumber;// 结束截取的位置 46 // 此处特殊处理最后一行的索引值 47 if (p == rowNumber - 1) { 48 // 最后一次不换行 49 tempStr = params.substring(start, paramsNameNumber); 50 } else { 51 // 每一次拼接字符串并换行 52 tempStr = params.substring(start, end) + " "; 53 } 54 newParamsName += tempStr;// 最终拼成的字符串 55 } 56 57 } else { 58 // 将旧标签的值赋给新标签 59 newParamsName = params; 60 } 61 //将最终的字符串返回 62 return newParamsName 63 } 64 65 }, 66 data: ["12-1808:00","12-1811:00","12-1814:00","12-1817:00","12-1820:00","12-1823:00"] 67 }, 68 yAxis: {}, 69 series: [{ 70 name: '销量', 71 type: 'bar', 72 data: [5, 20, 36, 10, 10, 20] 73 }] 74 }; 75 76 77 // 使用刚指定的配置项和数据显示图表。 78 myChart.setOption(option); 79 </script> 80 </body> 81 </html>